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) {

src/app/api/projects/route.ts

@@ -1,6 +1,8 @@
 import { NextResponse } from "next/server";
 import { PrismaClient } from "@prisma/client";
 import { verifyAccessToken } from "@/features/auth/authCrypto";
+import type { Block } from "@/features/editor/state/editorStore";
+import { cachePublicProject } from "@/features/projects/publicCache";
 
 const prisma = new PrismaClient();
 
@@ -108,6 +110,18 @@ export async function POST(request: Request) {
       },
     });
 
+    // 퍼블릭 슬러그 페이지(/p/[slug])가 DB 조회 없이도 최신 스냅샷을 바로 렌더링할 수 있도록
+    // 메모리 기반 캐시에 프로젝트 스냅샷을 저장해 둔다.
+    try {
+      cachePublicProject({
+        slug: project.slug,
+        title: project.title,
+        contentJson: (project.contentJson ?? []) as Block[],
+      });
+    } catch {
+      // 캐시 저장 실패는 퍼블릭 렌더링에만 영향을 주므로, API 응답 자체는 정상적으로 계속 진행한다.
+    }
+
     return NextResponse.json(project, { status: 201 });
   } catch (error: any) {
     return NextResponse.json(

src/app/api/projects/submissions/route.ts

@@ -0,0 +1,97 @@
+import { NextResponse } from "next/server";
+import { PrismaClient } from "@prisma/client";
+import { verifyAccessToken, decryptJson } from "@/features/auth/authCrypto";
+
+const prisma = new PrismaClient();
+
+interface AuthUser {
+  id: string;
+  email: string;
+  tokenVersion: number;
+}
+
+// 공통: pb_access 쿠키에서 JWT 토큰을 추출한다.
+function extractTokenFromCookieHeader(cookieHeader: string | null): string | null {
+  if (!cookieHeader) return null;
+
+  const parts = cookieHeader.split(";");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith("pb_access=")) {
+      const value = trimmed.substring("pb_access=".length);
+      return decodeURIComponent(value);
+    }
+  }
+  return null;
+}
+
+// 공통: Request 헤더의 쿠키에서 인증된 유저 정보를 복원한다.
+async function getAuthUserFromRequest(request: Request): Promise<AuthUser | null> {
+  const cookieHeader = request.headers.get("cookie");
+  const token = extractTokenFromCookieHeader(cookieHeader);
+  if (!token) return null;
+
+  const payload = await verifyAccessToken(token);
+  if (!payload) return null;
+
+  return {
+    id: payload.sub,
+    email: payload.email,
+    tokenVersion: payload.tokenVersion,
+  };
+}
+
+// GET /api/projects/submissions
+// - 로그인한 사용자의 모든 프로젝트에 대한 폼 제출 내역을 최신순으로 최대 100건 반환한다.
+// - FormSubmission.userId 가 현재 사용자와 일치하는 레코드만 포함한다.
+// - payloadJson 과 sensitiveEnc 복호화 결과를 병합해 payload 로 반환한다.
+export async function GET(request: Request) {
+  const authUser = await getAuthUserFromRequest(request);
+  if (!authUser) {
+    return NextResponse.json(
+      { message: "폼 제출 내역을 조회하려면 로그인이 필요합니다." },
+      { status: 401 },
+    );
+  }
+
+  const submissions = await prisma.formSubmission.findMany({
+    where: { userId: authUser.id },
+    orderBy: { createdAt: "desc" },
+    take: 100,
+    include: {
+      project: {
+        select: {
+          title: true,
+          slug: true,
+        },
+      },
+    },
+  });
+
+  const items = await Promise.all(
+    submissions.map(async (s: any) => {
+      const basePayload = (s.payloadJson ?? {}) as Record<string, unknown>;
+      let sensitive: Record<string, unknown> = {};
+
+      if (s.sensitiveEnc) {
+        try {
+          sensitive = (await decryptJson<Record<string, unknown>>(s.sensitiveEnc)) ?? {};
+        } catch {
+          sensitive = {};
+        }
+      }
+
+      const payload = { ...basePayload, ...sensitive };
+
+      return {
+        id: s.id,
+        createdAt: s.createdAt,
+        projectSlug: s.projectSlug,
+        projectTitle: s.project?.title ?? null,
+        payload,
+      };
+    }),
+  );
+
+  return NextResponse.json(items, { status: 200 });
+}

src/app/editor/forms/FormCheckboxPropertiesPanel.tsx

@@ -14,6 +14,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const checkboxProps = block.props as FormCheckboxBlockProps;
+  const groupLabelDisplay = checkboxProps.groupLabelDisplay ?? "visible";
 
   return (
     <div className="space-y-3 text-xs">
@@ -35,6 +36,78 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
         </select>
       </label>
 
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</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={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] 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={checkboxProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] 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={checkboxProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
       <label className="flex flex-col gap-1">
         <span className="text-slate-400">그룹 타이틀</span>
         <input
@@ -320,17 +393,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(checkboxProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
       </label>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">

src/app/editor/forms/FormControllerPanel.tsx

@@ -245,6 +245,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                 : labelText || fieldId;
 
               const checked = (formProps.fieldIds ?? []).includes(fieldId);
+              const required = (formProps.requiredFieldIds ?? []).includes(fieldId);
 
               return (
                 <label
@@ -266,7 +267,25 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                       } as any);
                     }}
                   />
-                  <span>{displayLabel}</span>
+                  <span className="flex-1 truncate">{displayLabel}</span>
+                  <label className="inline-flex items-center gap-1 text-[11px] text-slate-400">
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                      checked={required}
+                      onChange={(e) => {
+                        const current = formProps.requiredFieldIds ?? [];
+                        const next = e.target.checked
+                          ? Array.from(new Set([...current, fieldId]))
+                          : current.filter((id) => id !== fieldId);
+
+                        updateBlock(selectedBlockId, {
+                          requiredFieldIds: next,
+                        } as any);
+                      }}
+                    />
+                    <span>필수</span>
+                  </label>
                 </label>
               );
             })}

src/app/editor/forms/FormInputPropertiesPanel.tsx

@@ -14,6 +14,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 	if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
 
 	const inputProps = block.props as FormInputBlockProps;
+	const labelDisplay = inputProps.labelDisplay ?? "visible";
 
 	return (
 		<div className="space-y-3 text-xs">
@@ -45,6 +46,60 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}
 				/>
 			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">라벨 표시 방식</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={labelDisplay}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							labelDisplay: e.target.value,
+						} as any)
+					}
+				>
+					<option value="visible">표시 (기본)</option>
+					<option value="hidden">숨김</option>
+					<option value="floating">플로팅 라벨</option>
+				</select>
+			</label>
+			{labelDisplay === "visible" && (
+				<label className="flex flex-col gap-1 text-[11px] 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={inputProps.labelLayout ?? "stacked"}
+						onChange={(e) =>
+							updateBlock(selectedBlockId, {
+								labelLayout: e.target.value,
+							} as any)
+						}
+					>
+						<option value="stacked">세로 (기본)</option>
+						<option value="inline">가로 (인라인)</option>
+					</select>
+				</label>
+			)}
+			{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
+				<NumericPropertyControl
+					label="라벨/필드 간격 (px)"
+					unitLabel="(px)"
+					value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
+					min={0}
+					max={80}
+					step={2}
+					presets={[
+						{ id: "tight", label: "타이트", value: 4 },
+						{ id: "normal", label: "보통", value: 8 },
+						{ id: "relaxed", label: "느슨", value: 12 },
+						{ id: "extra", label: "넓게", value: 16 },
+					]}
+					onChangeValue={(v) =>
+						updateBlock(selectedBlockId, {
+							labelGapPx: v,
+						} as any)
+					}
+				/>
+			)}
 			{inputProps.labelMode === "image" && (
 				<>
 					<label className="flex flex-col gap-1">
@@ -116,17 +171,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 			</label>
 			<label className="inline-flex items-center gap-2">
-				<input
-					type="checkbox"
-					className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-					checked={Boolean(inputProps.required)}
-					onChange={(e) =>
-						updateBlock(selectedBlockId, {
-							required: e.target.checked,
-						} as any)
-					}
-				/>
-				<span className="text-slate-400">필수 필드</span>
+				<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
 			</label>
 			<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
 				<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
@@ -219,42 +264,6 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						<option value="right">오른쪽</option>
 					</select>
 				</label>
-				<label className="flex flex-col gap-1 text-[11px] 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={inputProps.labelLayout ?? "stacked"}
-						onChange={(e) =>
-							updateBlock(selectedBlockId, {
-								labelLayout: e.target.value,
-							} as any)
-						}
-					>
-						<option value="stacked">세로 (기본)</option>
-						<option value="inline">가로 (인라인)</option>
-					</select>
-				</label>
-				{(inputProps.labelLayout ?? "stacked") === "inline" && (
-					<NumericPropertyControl
-						label="라벨/필드 간격 (px)"
-						unitLabel="(px)"
-						value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
-						min={0}
-						max={80}
-						step={2}
-						presets={[
-							{ id: "tight", label: "타이트", value: 4 },
-							{ id: "normal", label: "보통", value: 8 },
-							{ id: "relaxed", label: "느슨", value: 12 },
-							{ id: "extra", label: "넓게", value: 16 },
-						]}
-						onChangeValue={(v) =>
-							updateBlock(selectedBlockId, {
-								labelGapPx: v,
-							} as any)
-						}
-					/>
-				)}
 				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
 					<span>너비</span>
 					<select
@@ -271,7 +280,6 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						<option value="fixed">고정 값</option>
 					</select>
 				</label>
-				{(inputProps.widthMode ?? "full") === "fixed" && (
 				<NumericPropertyControl
 					label="필드 고정 너비"
 					unitLabel="(px)"
@@ -290,7 +298,6 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						} as any);
 					}}
 				/>
-				)}
 				<NumericPropertyControl
 					label="필드 가로 패딩 (px)"
 					unitLabel="(px)"

src/app/editor/forms/FormRadioPropertiesPanel.tsx

@@ -14,6 +14,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const radioProps = block.props as FormRadioBlockProps;
+  const groupLabelDisplay = radioProps.groupLabelDisplay ?? "visible";
 
   return (
     <div className="space-y-3 text-xs">
@@ -35,6 +36,78 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
         </select>
       </label>
 
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</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={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] 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={radioProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] 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={radioProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (radioProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.labelGapPx === "number" ? radioProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
       <label className="flex flex-col gap-1">
         <span className="text-slate-400">그룹 타이틀</span>
         <input
@@ -320,17 +393,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(radioProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
       </label>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">

src/app/editor/forms/FormSelectPropertiesPanel.tsx

@@ -14,6 +14,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const selectProps = block.props as FormSelectBlockProps;
+  const labelDisplay = selectProps.labelDisplay ?? "visible";
 
   return (
     <div className="space-y-3 text-xs">
@@ -35,6 +36,62 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
         </select>
       </label>
 
+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">라벨 표시 방식</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={labelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              labelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {labelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] 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={selectProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      {labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
       <label className="flex flex-col gap-1">
         <span className="text-slate-400">필드 라벨</span>
         <input
@@ -136,17 +193,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(selectProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
       </label>
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
         <h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>

src/app/editor/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "../../styles/editor.css";
+
+export default function EditorLayout({ children }: { children: ReactNode }) {
+  // 에디터 전용 전역 스타일(editor.css)을 로드하기 위한 중첩 레이아웃.
+  // 실제 마크업 구조는 page.tsx 에서 정의하며, 여기서는 children 을 그대로 반환한다.
+  return children;
+}

src/app/editor/page.tsx

@@ -184,6 +184,21 @@ function EditorPageInner() {
     const slug = initialSlugFromQuery.trim();
     if (!slug) return;
 
+    // 이미 해당 slug 에 대한 autosave 스냅샷이 있으면,
+    // 서버에서 프로젝트를 다시 불러와서 현재 로컬 상태를 덮어쓰지 않는다.
+    if (typeof window !== "undefined") {
+      try {
+        const key = `pb:autosave:${slug}`;
+        const raw = window.localStorage.getItem(key);
+        if (raw) {
+          setHasLoadedInitialProjectFromSlug(true);
+          return;
+        }
+      } catch {
+        // localStorage 접근 실패 시에는 서버 로드를 계속 시도한다.
+      }
+    }
+
     let cancelled = false;
 
     const loadFromServer = async () => {
@@ -218,7 +233,7 @@ function EditorPageInner() {
     return () => {
       cancelled = true;
     };
-  }, [authChecked, initialSlugFromQuery, hasLoadedInitialProjectFromSlug, replaceBlocks]);
+  }, [authChecked, initialSlugFromQuery, hasLoadedInitialProjectFromSlug, replaceBlocks, updateProjectConfig, resetHistory]);
 
   useEffect(() => {
     let cancelled = false;
@@ -707,6 +722,13 @@ function EditorPageInner() {
 
   const rootBlocks = blocks.filter((block) => !block.sectionId);
 
+  const projectSlugRaw = projectConfig?.slug?.trim?.();
+  const projectSlug =
+    typeof projectSlugRaw === "string" && projectSlugRaw.length > 0 ? projectSlugRaw : "";
+  const previewHref = projectSlug
+    ? `/preview?slug=${encodeURIComponent(projectSlug)}`
+    : "/preview";
+
   useEffect(() => {
     if (!authChecked) return;
     if (typeof window === "undefined") return;
@@ -951,7 +973,7 @@ function EditorPageInner() {
             <span>프로젝트 목록</span>
           </Link>
           <Link
-            href="/preview"
+            href={previewHref}
             className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
           >
             <Eye className="w-3 h-3" aria-hidden="true" />
@@ -1443,6 +1465,7 @@ function SortableEditorBlock({
           {block.type === "formInput" && (() => {
             const inputProps = block.props as FormInputBlockProps;
             const inputType = inputProps.inputType ?? "text";
+            const fieldName = inputProps.formFieldName ?? block.id;
 
             // 필드 스타일: 텍스트 색상/배경/테두리/모서리 등은 커스텀 props 를 통해 제어한다.
             const inputTokens = computeFormInputEditorTokens(inputProps);
@@ -1452,11 +1475,17 @@ function SortableEditorBlock({
             const isInline = labelLayout === "inline";
 
             const inputAlignClass = inputTokens.inputAlignClass;
+            const labelDisplay = (inputProps as any).labelDisplay ?? "visible";
+
+            // 프리뷰/퍼블릭과 동일한 pb-input/pb-textarea 클래스를 사용해 높이/패딩을 통일한다.
+            const baseInputClass = `pb-input w-full text-xs outline-none ${inputAlignClass}`;
+            const baseTextareaClass = `pb-textarea w-full text-xs outline-none ${inputAlignClass}`;
 
             // 에디터에서는 폼 입력 블록이 실제 입력 UI처럼 보이도록 라벨 + 인풋(또는 textarea)을 함께 렌더링한다.
             return (
               <div className={`text-xs ${isInline ? "flex items-center gap-2" : "flex flex-col gap-1"}`}>
-                {inputProps.labelMode === "image" && inputProps.labelImageUrl ? (
+                {labelDisplay === "visible" && (
+                  inputProps.labelMode === "image" && inputProps.labelImageUrl ? (
                     // eslint-disable-next-line @next/next/no-img-element
                     <img
                       src={inputProps.labelImageUrl}
@@ -1465,28 +1494,75 @@ function SortableEditorBlock({
                     />
                   ) : (
                     <span className="text-slate-200 shrink-0">{inputProps.label}</span>
+                  )
                 )}
                 {(() => {
                   // widthMode 와 labelLayout 에 따라 wrapper 의 Tailwind width/flex 클래스를 결정한다.
                   const widthClass = inputTokens.widthClass;
 
+                  if (labelDisplay === "floating") {
+                    const placeholder = " ";
+
                     return (
-                <div
-                  data-testid="form-input-field"
-                  style={fieldStyle}
-                  className={`${widthClass} rounded border border-slate-700 bg-slate-950`}
+                      <div className={`${widthClass} relative`}>
+                        <span
+                          data-testid="editor-form-input-floating-label"
+                          className="absolute left-2 pointer-events-none"
+                          style={{
+                            top: "-0.3rem",
+                            fontSize: "0.725rem",
+                            color: "#e5e7eb",
+                            backgroundColor: "#020617",
+                            padding: "0 0.25rem",
+                          }}
                         >
+                          {inputProps.label}
+                        </span>
                         {inputType === "textarea" ? (
                           <textarea
-                      className={`w-full min-h-[60px] bg-transparent px-2 py-1 text-xs outline-none ${inputAlignClass}`}
+                            data-testid="form-input-field"
+                            className={`${baseTextareaClass} pt-6`}
+                            style={fieldStyle}
+                            name={fieldName}
+                            placeholder={placeholder}
+                            aria-label={inputProps.label}
+                            readOnly
+                          />
+                        ) : (
+                          <input
+                            data-testid="form-input-field"
+                            className={`${baseInputClass} pt-6`}
+                            style={fieldStyle}
+                            type={inputType === "email" ? "email" : "text"}
+                            name={fieldName}
+                            placeholder={placeholder}
+                            aria-label={inputProps.label}
+                            readOnly
+                          />
+                        )}
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <div className={widthClass}>
+                      {inputType === "textarea" ? (
+                        <textarea
+                          data-testid="form-input-field"
+                          className={baseTextareaClass}
+                          style={fieldStyle}
+                          name={fieldName}
                           placeholder={inputProps.placeholder || inputProps.label}
                           aria-label={inputProps.label}
                           readOnly
                         />
                       ) : (
                         <input
-                      className={`w-full bg-transparent px-2 py-1 text-xs outline-none ${inputAlignClass}`}
+                          data-testid="form-input-field"
+                          className={baseInputClass}
+                          style={fieldStyle}
                           type={inputType === "email" ? "email" : "text"}
+                          name={fieldName}
                           placeholder={inputProps.placeholder || inputProps.label}
                           aria-label={inputProps.label}
                           readOnly
@@ -1500,6 +1576,7 @@ function SortableEditorBlock({
           })()}
           {block.type === "formSelect" && (() => {
             const selectProps = block.props as FormSelectBlockProps;
+            const fieldName = selectProps.formFieldName ?? block.id;
             const options = Array.isArray(selectProps.options) && selectProps.options.length > 0
               ? selectProps.options
               : [
@@ -1523,12 +1600,12 @@ function SortableEditorBlock({
                 ) : (
                   <span className="text-slate-200">{selectProps.label}</span>
                 )}
-                <div
-                  style={fieldStyle}
-                  className="w-full rounded border border-slate-700 bg-slate-950"
-                >
+                <div className="w-full">
                   <select
-                    className="w-full bg-transparent px-2 py-1 text-xs outline-none"
+                    data-testid="form-select-field"
+                    className="pb-select w-full text-xs outline-none"
+                    style={fieldStyle}
+                    name={fieldName}
                     aria-label={selectProps.label}
                     defaultValue={options[0]?.value}
                   >
@@ -1552,12 +1629,42 @@ function SortableEditorBlock({
                 ];
 
             const groupLabelMode = radioProps.groupLabelMode ?? "text";
+            const groupLabelDisplay = radioProps.groupLabelDisplay ?? "visible";
+            const labelLayout = radioProps.labelLayout ?? "stacked";
+            const isInlineLayout = labelLayout === "inline" && groupLabelDisplay === "visible";
 
             const radioTokens = computeFormOptionGroupEditorTokens(radioProps);
             const fieldStyle = radioTokens.fieldStyle;
 
+            const optionLayout = radioProps.optionLayout ?? "stacked";
+            const optionsLayoutClass = [
+              "pb-form-options",
+              optionLayout === "inline" ? "pb-form-options--inline" : "pb-form-options--stacked",
+            ].join(" ");
+
+            // optionGapPx 를 사용해 옵션 컨테이너의 rowGap/columnGap 을 제어한다.
+            const optionGapPx =
+              typeof radioProps.optionGapPx === "number" && radioProps.optionGapPx >= 0
+                ? radioProps.optionGapPx
+                : undefined;
+            const gapStyle: CSSProperties =
+              optionGapPx !== undefined
+                ? optionLayout === "inline"
+                  ? { rowGap: `${optionGapPx}px`, columnGap: `${optionGapPx}px` }
+                  : { rowGap: `${optionGapPx}px` }
+                : {};
+
+            // 그룹 타이틀 레이아웃이 inline 인 경우, 라벨과 옵션 컨테이너를 가로 방향으로 배치하고 labelGapPx 를 columnGap 으로 사용한다.
+            const inlineGapPx = typeof radioProps.labelGapPx === "number" ? radioProps.labelGapPx : 8;
+            const groupContainerStyle: CSSProperties = isInlineLayout
+              ? { columnGap: `${inlineGapPx}px` }
+              : {};
+            const groupContainerClassName = isInlineLayout
+              ? "flex flex-row items-center text-xs"
+              : "flex flex-col gap-1 text-xs";
+
             return (
-              <div className="flex flex-col gap-1 text-xs">
+              <div className={groupContainerClassName} style={groupContainerStyle}>
                 {/* 그룹 타이틀은 텍스트/이미지 모드를 지원한다. */}
                 {groupLabelMode === "image" && radioProps.groupLabelImageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
@@ -1569,15 +1676,12 @@ function SortableEditorBlock({
                 ) : (
                   <span className="text-slate-200">{radioProps.groupLabel}</span>
                 )}
-                <div
-                  style={fieldStyle}
-                  className="flex flex-col gap-1 rounded border border-slate-700 bg-slate-950"
-                >
+                <div style={{ ...fieldStyle, ...gapStyle }} className={optionsLayoutClass}>
                   {options.map((opt) => (
-                    <label key={opt.value} className="inline-flex items-center gap-2 text-slate-200">
+                    <label key={opt.value} className="pb-form-option">
                       <input
                         type="radio"
-                        className="h-3 w-3 rounded border border-slate-700 bg-slate-950"
+                        className="h-4 w-4 border-slate-700 bg-slate-900 text-sky-500"
                         name={radioProps.formFieldName}
                         value={opt.value}
                         readOnly
@@ -1609,12 +1713,43 @@ function SortableEditorBlock({
                 ];
 
             const groupLabelMode = checkboxProps.groupLabelMode ?? "text";
+            const groupLabelDisplay = checkboxProps.groupLabelDisplay ?? "visible";
+            const labelLayout = checkboxProps.labelLayout ?? "stacked";
+            const isInlineLayout = labelLayout === "inline" && groupLabelDisplay === "visible";
 
             const checkboxTokens = computeFormOptionGroupEditorTokens(checkboxProps);
             const fieldStyle = checkboxTokens.fieldStyle;
 
+            const optionLayout = checkboxProps.optionLayout ?? "stacked";
+            const optionsLayoutClass = [
+              "pb-form-options",
+              optionLayout === "inline" ? "pb-form-options--inline" : "pb-form-options--stacked",
+            ].join(" ");
+
+            // 그룹 타이틀 레이아웃이 inline 인 경우, 라벨과 옵션 컨테이너를 가로 방향으로 배치하고 labelGapPx 를 columnGap 으로 사용한다.
+            const inlineGapPx = typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8;
+            const groupContainerStyle: CSSProperties = {
+              ...fieldStyle,
+              ...(isInlineLayout ? { columnGap: `${inlineGapPx}px` } : {}),
+            };
+
+            // optionGapPx 를 사용해 옵션 컨테이너의 rowGap/columnGap 을 제어한다.
+            const optionGapPx =
+              typeof checkboxProps.optionGapPx === "number" && checkboxProps.optionGapPx >= 0
+                ? checkboxProps.optionGapPx
+                : undefined;
+            const optionsStyle: CSSProperties =
+              optionGapPx !== undefined
+                ? optionLayout === "inline"
+                  ? { rowGap: `${optionGapPx}px`, columnGap: `${optionGapPx}px` }
+                  : { rowGap: `${optionGapPx}px` }
+                : {};
+            const groupContainerClassName = isInlineLayout
+              ? "flex flex-row items-center text-xs text-slate-200"
+              : "flex flex-col gap-1 text-xs text-slate-200";
+
             return (
-              <div className="flex flex-col gap-1 text-xs text-slate-200" style={fieldStyle}>
+              <div className={groupContainerClassName} style={groupContainerStyle}>
                 {/* 체크박스 그룹 타이틀도 텍스트/이미지 모드를 지원한다. */}
                 {groupLabelMode === "image" && checkboxProps.groupLabelImageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
@@ -1626,12 +1761,12 @@ function SortableEditorBlock({
                 ) : (
                   <span className="text-slate-200">{checkboxProps.groupLabel}</span>
                 )}
-                <div className="flex flex-col gap-1">
+                <div className={optionsLayoutClass} style={optionsStyle}>
                   {options.map((opt) => (
-                    <label key={opt.value} className="inline-flex items-center gap-2">
+                    <label key={opt.value} className="pb-form-option">
                       <input
                         type="checkbox"
-                        className="h-3 w-3 rounded border border-slate-700 bg-slate-950"
+                        className="h-4 w-4 rounded border-slate-700 bg-slate-900 text-sky-500"
                         name={checkboxProps.formFieldName}
                         value={opt.value}
                         readOnly

src/app/editor/panels/ButtonPropertiesPanel.tsx

@@ -472,9 +472,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
             }
             return 0;
           })()}
-          min={-2}
-          max={10}
-          step={0.1}
+          min={-32}
+          max={32}
+          step={1}
           presets={[
             { id: "tighter", label: "아주 좁게", value: -1.5 },
             { id: "tight", label: "좁게", value: -0.5 },

src/app/p/[slug]/page.tsx

@@ -0,0 +1,74 @@
+import { notFound } from "next/navigation";
+import { PrismaClient } from "@prisma/client";
+
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/features/export/buildStaticHtml";
+import { getCachedPublicProject } from "@/features/projects/publicCache";
+
+const prisma = new PrismaClient();
+
+interface PageParams {
+  // Next.js App Router 에서는 params 가 Promise 로 전달되므로
+  // 서버 컴포넌트에서 사용하기 전에 await 로 한 번 풀어줘야 한다.
+  params: Promise<{ slug: string }>;
+}
+
+// /p/[slug] 공개 페이지
+// - slug 에 해당하는 Project 의 contentJson 을 불러와 buildStaticHtml 로 정적 HTML 을 생성한다.
+// - Export ZIP 에 포함되는 index.html 과 동일한 app-root DOM 구조를 사용해 렌더링한다.
+// - 인증 없이 접근 가능하며, 폼 제출은 /api/forms/submit 을 통해 정적 Export 와 동일하게 동작한다.
+export default async function PublicProjectPage({ params }: PageParams) {
+  // Next 가 넘겨주는 params 는 Promise 이므로, 먼저 await 해서 slug 를 꺼낸다.
+  const resolvedParams = await params;
+  const slugRaw = resolvedParams.slug ?? "";
+  const slug = slugRaw.toString().trim();
+
+  if (!slug) {
+    notFound();
+  }
+
+  // 1차로 메모리 기반 퍼블릭 캐시에서 스냅샷을 조회한다.
+  const cached = getCachedPublicProject(slug);
+
+  let blocks: Block[];
+  let title: string;
+
+  if (cached) {
+    blocks = cached.contentJson ?? [];
+    title = cached.title ?? "";
+  } else {
+    const project = await prisma.project.findUnique({
+      where: { slug },
+      select: {
+        title: true,
+        slug: true,
+        contentJson: true,
+      },
+    });
+
+    if (!project) {
+      notFound();
+    }
+
+    blocks = (project.contentJson ?? []) as Block[];
+    title = project.title;
+  }
+
+  // Export index.html 과 동일한 규칙으로 ProjectConfig 를 구성한다.
+  const projectConfig: ProjectConfig = {
+    title,
+    slug,
+    canvasPreset: "full",
+    canvasBgColorHex: "#020617",
+    bodyBgColorHex: "#020617",
+  } as ProjectConfig;
+
+  const fullHtml = buildStaticHtml(blocks, projectConfig);
+
+  // buildStaticHtml 이 생성한 index.html 에서 <main> ... </main> 블록만 추출해 렌더링한다.
+  // 이렇게 하면 Export index.html 과 동일한 main/app-root DOM 구조를 재사용할 수 있다.
+  const mainMatch = fullHtml.match(/<main[\s\S]*?<\/main>/);
+  const mainHtml = mainMatch ? mainMatch[0] : "";
+
+  return <div dangerouslySetInnerHTML={{ __html: mainHtml }} />;
+}

src/app/preview/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "../../styles/editor.css";
+
+export default function PreviewLayout({ children }: { children: ReactNode }) {
+  // 프리뷰 화면에서도 에디터 크롬과 동일한 전용 스타일(editor.css)을 사용한다.
+  // 콘텐츠 블록 자체의 모양은 builder.css(pb-*) 기준으로 렌더된다.
+  return children;
+}

src/app/preview/page.tsx

@@ -39,27 +39,35 @@ export default function PreviewPage() {
   useEffect(() => {
     if (typeof window === "undefined") return;
 
-    let slug = (projectConfig as any)?.slug?.trim?.();
+    const configSlugRaw = (projectConfig as any)?.slug?.trim?.();
+    const configSlug =
+      typeof configSlugRaw === "string" && configSlugRaw.length > 0 ? configSlugRaw : "";
 
-    if (!slug) {
+    let querySlug = "";
     try {
       const url = new URL(window.location.href);
       const fromQuery = url.searchParams.get("slug")?.trim();
 
-        if (fromQuery && fromQuery !== slug) {
-          slug = fromQuery;
-          updateProjectConfig({ slug: fromQuery } as any);
+      if (fromQuery) {
+        querySlug = fromQuery;
       }
     } catch {
       // URL 파싱 오류는 무시하고, autosave 복원 없이 진행한다.
     }
-    }
 
-    if (!slug) return;
+    const effectiveSlug = querySlug || configSlug;
+    if (!effectiveSlug) return;
 
-    const key = `pb:autosave:${slug}`;
+    const key = `pb:autosave:${effectiveSlug}`;
     const raw = window.localStorage.getItem(key);
-    if (!raw) return;
+
+    if (!raw) {
+      // autosave 스냅샷이 없을 때만 URL 쿼리 슬러그를 projectConfig.slug 에 동기화한다.
+      if (querySlug && querySlug !== configSlug) {
+        updateProjectConfig({ slug: querySlug } as any);
+      }
+      return;
+    }
 
     try {
       const parsed = JSON.parse(raw) as { blocks?: any[]; projectConfig?: any };
@@ -68,6 +76,9 @@ export default function PreviewPage() {
       }
       if (parsed.projectConfig) {
         updateProjectConfig(parsed.projectConfig as any);
+      } else if (querySlug && querySlug !== configSlug) {
+        // 스냅샷에 projectConfig 가 없을 때만 쿼리 슬러그를 반영한다.
+        updateProjectConfig({ slug: querySlug } as any);
       }
 
       // 프리뷰 진입 시 autosave 프로젝트를 복원하는 경우에도 에디터 히스토리는 새 프로젝트 기준으로만 유지되도록 초기화한다.
@@ -125,6 +136,13 @@ export default function PreviewPage() {
       ? projectConfig.canvasWidthPx
       : null;
 
+  const projectSlugRaw = (projectConfig as any)?.slug?.trim?.();
+  const projectSlug =
+    typeof projectSlugRaw === "string" && projectSlugRaw.length > 0 ? projectSlugRaw : "";
+  const editorHref = projectSlug
+    ? `/editor?slug=${encodeURIComponent(projectSlug)}`
+    : "/editor";
+
   if (widthPx != null) {
     canvasStyle.maxWidth = `${widthPx}px`;
   } else if (preset === "mobile") {
@@ -163,7 +181,7 @@ export default function PreviewPage() {
             프로젝트 목록
           </Link>
           <Link
-            href="/editor"
+            href={editorHref}
             className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
           >
             에디터로 돌아가기

src/app/projects/[slug]/submissions/page.tsx

@@ -109,8 +109,19 @@ export default function ProjectSubmissionsPage() {
           <h1 className="text-xl font-semibold">폼 제출 내역</h1>
           <p className="text-xs text-slate-400">프로젝트에 연결된 폼으로 수집된 제출 데이터를 확인할 수 있습니다.</p>
         </div>
-        <div className="text-xs text-slate-300">
+        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
           <span className="font-mono text-[11px]">{slug}</span>
+          <a
+            href="/projects"
+            role="link"
+            className="text-[11px] text-sky-400 hover:text-sky-300 underline-offset-2 hover:underline"
+            onClick={(event) => {
+              event.preventDefault();
+              router.push("/projects");
+            }}
+          >
+            프로젝트 목록
+          </a>
         </div>
       </header>
 

src/app/projects/page.tsx

@@ -212,6 +212,13 @@ export default function ProjectsPage() {
           >
             로그아웃
           </button>
+          <Link
+            href="/projects/submissions"
+            className="inline-flex items-center gap-1 rounded border border-emerald-700 bg-emerald-950 px-3 py-1 text-emerald-100 hover:bg-emerald-900 shadow-sm"
+          >
+            <ListChecks className="w-4 h-4" aria-hidden="true" />
+            <span>전체 제출 내역</span>
+          </Link>
           <Link
             href="/editor"
             className="inline-flex items-center gap-1 rounded border border-sky-700 bg-sky-950 px-3 py-1 text-sky-100 hover:bg-sky-900 shadow-sm"

src/app/projects/submissions/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface SubmissionItem {
+  id: string;
+  createdAt: string;
+  projectSlug: string;
+  projectTitle: string | null;
+  payload: Record<string, unknown>;
+}
+
+type PageStatus = "idle" | "loading" | "error";
+
+export default function AllProjectSubmissionsPage() {
+  const router = useRouter();
+  const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
+  const [status, setStatus] = useState<PageStatus>("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        setStatus("loading");
+        setErrorMessage(null);
+
+        const res = await fetch("/api/projects/submissions");
+
+        if (!res.ok) {
+          if (cancelled) return;
+
+          if (res.status === 401) {
+            setStatus("error");
+            setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.");
+            router.push("/login");
+            return;
+          }
+
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          return;
+        }
+
+        const data = (await res.json()) as SubmissionItem[];
+
+        if (!cancelled) {
+          setSubmissions(Array.isArray(data) ? data : []);
+          setStatus("idle");
+          setErrorMessage(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setStatus("error");
+          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const renderOtherFields = (payload: Record<string, unknown>): string => {
+    const knownKeys = new Set(["name", "email", "phone", "birthdate"]);
+    const entries = Object.entries(payload).filter(([key]) => !knownKeys.has(key));
+
+    if (entries.length === 0) {
+      return "-";
+    }
+
+    return entries
+      .map(([key, value]) => {
+        const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+        return `${key}: ${stringValue}`;
+      })
+      .join("\n");
+  };
+
+  return (
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/80 backdrop-blur">
+        <div>
+          <h1 className="text-xl font-semibold">전체 폼 제출 내역</h1>
+          <p className="text-xs text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
+        </div>
+        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
+          <a
+            href="/projects"
+            role="link"
+            className="text-[11px] text-sky-400 hover:text-sky-300 underline-offset-2 hover:underline"
+            onClick={(event) => {
+              event.preventDefault();
+              router.push("/projects");
+            }}
+          >
+            프로젝트 목록
+          </a>
+        </div>
+      </header>
+
+      <section className="flex-1 px-6 py-4 overflow-auto">
+        {status === "error" && errorMessage && (
+          <p className="text-xs text-red-300 mb-3">{errorMessage}</p>
+        )}
+
+        {status === "loading" && (
+          <p className="text-xs text-slate-400 mb-3">폼 제출 내역을 불러오는 중입니다...</p>
+        )}
+
+        {submissions.length === 0 && status === "idle" && !errorMessage && (
+          <p className="text-xs text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
+        )}
+
+        {submissions.length > 0 && (
+          <table className="w-full text-xs text-left border-collapse mt-2">
+            <thead>
+              <tr className="border-b border-slate-800 text-slate-400">
+                <th className="py-2 pr-4">제출 시각</th>
+                <th className="py-2 pr-4">프로젝트</th>
+                <th className="py-2 pr-4">Slug</th>
+                <th className="py-2 pr-4">이름</th>
+                <th className="py-2 pr-4">이메일</th>
+                <th className="py-2 pr-4">전화번호</th>
+                <th className="py-2 pr-4">생년월일</th>
+                <th className="py-2 pr-4">기타 필드</th>
+              </tr>
+            </thead>
+            <tbody>
+              {submissions.map((item) => {
+                const payload = (item.payload ?? {}) as Record<string, unknown>;
+
+                const nameValue = payload["name"];
+                const emailValue = payload["email"];
+                const phoneValue = payload["phone"];
+                const birthdateValue = payload["birthdate"];
+
+                const name = typeof nameValue === "string" ? nameValue : "";
+                const email = typeof emailValue === "string" ? emailValue : "";
+                const phone = typeof phoneValue === "string" ? phoneValue : "";
+                const birthdate = typeof birthdateValue === "string" ? birthdateValue : "";
+
+                return (
+                  <tr key={item.id} className="border-b border-slate-900 hover:bg-slate-900/60">
+                    <td className="py-2 pr-4 text-slate-300 text-[11px]">
+                      {new Date(item.createdAt).toLocaleString()}
+                    </td>
+                    <td className="py-2 pr-4 text-slate-100">{item.projectTitle ?? "-"}</td>
+                    <td className="py-2 pr-4 text-slate-300">{item.projectSlug}</td>
+                    <td className="py-2 pr-4 text-slate-100">{name}</td>
+                    <td className="py-2 pr-4 text-slate-300">{email}</td>
+                    <td className="py-2 pr-4 text-slate-300">{phone}</td>
+                    <td className="py-2 pr-4 text-slate-300">{birthdate}</td>
+                    <td className="py-2 pr-4 text-slate-300 whitespace-pre-wrap">
+                      {renderOtherFields(payload)}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </main>
+  );
+}

src/features/editor/components/PublicPageRenderer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type CSSProperties } from "react";
+import { useState, useMemo, type CSSProperties } from "react";
 import type {
   Block,
   TextBlockProps,
@@ -27,11 +27,11 @@ import {
   computeVideoPublicTokens,
 } from "@/features/editor/utils/videoHelpers";
 import { computeButtonPublicTokens, computeButtonPbTokens } from "@/features/editor/utils/buttonHelpers";
-import { computeTextPublicTokens } from "@/features/editor/utils/textHelpers";
+import { computeTextPublicTokens, computeTextPbTokens } from "@/features/editor/utils/textHelpers";
 import { computeDividerPublicTokens } from "@/features/editor/utils/dividerHelpers";
 import { computeImagePublicTokens } from "@/features/editor/utils/imageHelpers";
 import { computeListPublicTokens } from "@/features/editor/utils/listHelpers";
-import { computeSectionPublicTokens } from "@/features/editor/utils/sectionHelpers";
+import { computeSectionPublicTokens, computeSectionExportTokens } from "@/features/editor/utils/sectionHelpers";
 import {
   computeFormInputPublicTokens,
   computeFormSelectPublicTokens,
@@ -107,18 +107,217 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
   const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
   const [formMessage, setFormMessage] = useState<string>("");
 
+  const [activeFormId, setActiveFormId] = useState<string | null>(null);
+
+  // 폼 컨트롤러 기준으로 필수 필드 맵을 구성한다.
+  const requiredFieldIdSet = useMemo(() => {
+    const set = new Set<string>();
+    for (const block of blocks) {
+      if (block.type !== "form") continue;
+      const props = block.props as any;
+      const fieldIds: string[] = Array.isArray(props.requiredFieldIds) ? props.requiredFieldIds : [];
+      for (const id of fieldIds) {
+        if (id) set.add(id);
+      }
+    }
+    return set;
+  }, [blocks]);
+
+  const submitFormByController = async (formBlock: Block) => {
+    const props = formBlock.props as FormBlockProps;
+    const tokens = computeFormControllerPublicTokens(formBlock, blocks);
+    const fields = tokens.fields;
+
+    const missingRequiredLabels: string[] = [];
+
+    fields.forEach((field) => {
+      if (!field.required) {
+        return;
+      }
+
+      const name = field.name;
+      if (!name) {
+        return;
+      }
+
+      let isEmpty = false;
+
+      if (field.type === "checkbox") {
+        const nodes = document.querySelectorAll<HTMLInputElement>(
+          `input[type="checkbox"][name="${name}"]`,
+        );
+        const anyChecked = Array.from(nodes).some((el) => el.checked);
+        isEmpty = !anyChecked;
+      } else if (field.type === "radio") {
+        const selected = document.querySelector<HTMLInputElement>(
+          `input[type="radio"][name="${name}"]:checked`,
+        );
+        isEmpty = !selected;
+      } else if (field.type === "select") {
+        const selectEl = document.querySelector<HTMLSelectElement>(`select[name="${name}"]`);
+        if (!selectEl) {
+          isEmpty = true;
+        } else {
+          const value = selectEl.value;
+          isEmpty = value == null || `${value}`.trim() === "";
+        }
+      } else {
+        const inputEl = document.querySelector<HTMLInputElement>(`input[name="${name}"]`);
+        const textareaEl = document.querySelector<HTMLTextAreaElement>(`textarea[name="${name}"]`);
+
+        const valueSource = (inputEl as HTMLInputElement | null) ?? (textareaEl as HTMLTextAreaElement | null);
+        if (!valueSource) {
+          isEmpty = true;
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const rawValue = (valueSource as any).value;
+          const value = typeof rawValue === "string" ? rawValue : rawValue != null ? String(rawValue) : "";
+          isEmpty = value.trim() === "";
+        }
+      }
+
+      if (isEmpty) {
+        const label = (field.label || field.name || "").trim();
+        if (label && !missingRequiredLabels.includes(label)) {
+          missingRequiredLabels.push(label);
+        }
+      }
+    });
+
+    if (missingRequiredLabels.length > 0) {
+      setActiveFormId(formBlock.id);
+      setFormStatus("error");
+
+      const bulletLines = missingRequiredLabels.map((label) => `- ${label}`).join("\n");
+      const message = `다음 필수 항목을 입력해 주세요:\n${bulletLines}`;
+
+      setFormMessage(message);
+      return;
+    }
+
+    const data = new FormData();
+    data.append("__config", JSON.stringify(props));
+    if (projectSlug && projectSlug.trim() !== "") {
+      data.append("__projectSlug", projectSlug.trim());
+    }
+
+    fields.forEach((field) => {
+      const name = field.name;
+      if (!name) {
+        return;
+      }
+
+      if (field.type === "checkbox") {
+        const nodes = document.querySelectorAll<HTMLInputElement>(
+          `input[type="checkbox"][name="${name}"]`,
+        );
+        nodes.forEach((el) => {
+          if (el.checked) {
+            data.append(name, el.value);
+          }
+        });
+        return;
+      }
+
+      if (field.type === "radio") {
+        const selected = document.querySelector<HTMLInputElement>(
+          `input[type="radio"][name="${name}"]:checked`,
+        );
+        if (selected) {
+          data.append(name, selected.value);
+        }
+        return;
+      }
+
+      if (field.type === "select") {
+        const selectEl = document.querySelector<HTMLSelectElement>(`select[name="${name}"]`);
+        if (selectEl) {
+          data.append(name, selectEl.value);
+        }
+        return;
+      }
+
+      const inputEl = document.querySelector<HTMLInputElement>(`input[name="${name}"]`);
+      const textareaEl = document.querySelector<HTMLTextAreaElement>(`textarea[name="${name}"]`);
+
+      const valueSource = (inputEl as HTMLInputElement | null) ?? (textareaEl as HTMLTextAreaElement | null);
+      if (valueSource) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const value = (valueSource as any).value ?? "";
+        data.append(name, value);
+      }
+    });
+
+    try {
+      setActiveFormId(formBlock.id);
+      setFormStatus("submitting");
+      setFormMessage("");
+
+      const res = await fetch("/api/forms/submit", {
+        method: "POST",
+        body: data,
+      });
+
+      if (res.ok) {
+        setFormStatus("success");
+        setFormMessage(props.successMessage ?? "성공적으로 전송되었습니다.");
+      } else {
+        setFormStatus("error");
+        setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("[PublicPageRenderer] form submit error", error);
+      setFormStatus("error");
+      setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
+    }
+  };
+
   const renderBlock = (block: Block) => {
     if (block.type === "text") {
       const props = block.props as TextBlockProps;
-      const tokens = computeTextPublicTokens(props);
-      const textStyle: CSSProperties = { ...tokens.styleOverrides };
+      const publicTokens = computeTextPublicTokens(props);
+      const text = typeof props.text === "string" ? props.text : "";
+
+      const pbTokens = computeTextPbTokens({
+        text,
+        align: props.align ?? "left",
+        size: props.size ?? "base",
+        fontSizeMode: props.fontSizeMode ?? "scale",
+        fontSizeScale: props.fontSizeScale ?? undefined,
+        fontSizeCustom: props.fontSizeCustom ?? undefined,
+        lineHeightMode: props.lineHeightMode ?? "scale",
+        lineHeightScale: props.lineHeightScale ?? undefined,
+        lineHeightCustom: props.lineHeightCustom ?? undefined,
+        fontWeightMode: props.fontWeightMode ?? "scale",
+        fontWeightScale: props.fontWeightScale ?? undefined,
+        fontWeightCustom: props.fontWeightCustom ?? undefined,
+        colorMode: props.colorMode ?? undefined,
+        colorPalette: props.colorPalette ?? undefined,
+        colorCustom: props.colorCustom ?? undefined,
+        backgroundColorCustom: (props as any).backgroundColorCustom ?? undefined,
+        maxWidthMode: props.maxWidthMode ?? "scale",
+        maxWidthScale: props.maxWidthScale ?? undefined,
+        underline: props.underline ?? false,
+        strike: props.strike ?? false,
+        italic: props.italic ?? false,
+      });
+
+      const className = [
+        pbTokens.alignClass,
+        pbTokens.sizeClass,
+        pbTokens.leadingClass,
+        pbTokens.weightClass,
+        pbTokens.colorClass,
+        pbTokens.maxWidthClass,
+        ...pbTokens.extraClasses,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      const textStyle: CSSProperties = { ...publicTokens.styleOverrides };
 
       return (
-        <p
-          key={block.id}
-          className={`${tokens.alignClass} ${tokens.sizeClass} text-slate-50 leading-relaxed whitespace-pre-wrap`}
-          style={textStyle}
-        >
+        <p key={block.id} className={className} style={textStyle}>
           {props.text}
         </p>
       );
@@ -127,31 +326,112 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
     if (block.type === "formInput") {
       const props = block.props as FormInputBlockProps;
       const tokens = computeFormInputPublicTokens(props);
+      const isRequired = requiredFieldIdSet.has(block.id);
 
-      const baseInputClass =
-        "rounded border px-3 py-2 text-xs outline-none focus:border-sky-500";
+      const labelDisplay = (props as any).labelDisplay ?? "visible";
+      const wrapperClassName = `${tokens.wrapperLayoutClass} text-xs text-slate-200`;
+
+      const rawPlaceholder =
+        typeof props.placeholder === "string" ? props.placeholder.trim() : "";
+      const rawLabel = typeof props.label === "string" ? props.label.trim() : "";
+
+      // 플로팅 라벨 모드에서는 placeholder 텍스트를 인풋 안에 직접 렌더링하지 않고,
+      // 라벨이 인풋 안/위에서 이동하도록 사용한다. placeholder 가 라벨과 다를 경우에만
+      // 인풋 하단의 보조 설명 텍스트로 노출한다.
+      const helperText =
+        labelDisplay === "floating" && rawPlaceholder !== "" && rawPlaceholder !== rawLabel
+          ? rawPlaceholder
+          : null;
+
+      const inputId = props.formFieldName || block.id;
+
+      if (labelDisplay === "floating") {
+        // builder.css 기반 플로팅 라벨 마크업: pb-form-field/pb-form-field--floating + pb-form-label + pb-input
+        // Export 경로와 동일한 DOM 구조를 사용해 프리뷰/퍼블릭/Export 가 모두 같은 레이아웃을 갖도록 맞춘다.
+
+        // paddingY 값을 사용해 플로팅 라벨과 인풋 높이를 함께 제어하기 위해 CSS 변수에 전달한다.
+        const paddingY =
+          typeof (props as any).paddingY === "number" && (props as any).paddingY >= 0
+            ? (props as any).paddingY
+            : null;
+
+        const floatingFieldStyle: CSSProperties = {};
+        if (paddingY !== null) {
+          (floatingFieldStyle as any)["--pb-input-padding-y"] = `${paddingY / 16}rem`;
+        }
+
+        return (
+          <div
+            key={block.id}
+            data-testid="preview-form-input-wrapper"
+            className="pb-form-field pb-form-field--floating"
+            style={floatingFieldStyle}
+          >
+            {props.inputType === "textarea" ? (
+              <textarea
+                id={inputId}
+                data-testid="preview-form-input"
+                className={`pb-textarea ${tokens.widthClass}`}
+                style={tokens.inputStyle}
+                name={props.formFieldName}
+                required={isRequired}
+                // 공백 placeholder 로 라벨이 인풋 안에서 겹치지 않도록 한다.
+                placeholder=" "
+              />
+            ) : (
+              <input
+                id={inputId}
+                data-testid="preview-form-input"
+                className={`pb-input ${tokens.widthClass}`}
+                style={tokens.inputStyle}
+                type={props.inputType === "email" ? "email" : "text"}
+                name={props.formFieldName}
+                required={isRequired}
+                placeholder=" "
+              />
+            )}
+            {helperText && (
+              <p className="mt-1 text-[10px] text-slate-400">{helperText}</p>
+            )}
+            <label htmlFor={inputId} className="pb-form-label">
+              {props.label}
+            </label>
+          </div>
+        );
+      }
+
+      const labelSpan =
+        labelDisplay === "hidden" ? (
+          <span className="sr-only">{props.label}</span>
+        ) : (
+          <span>{props.label}</span>
+        );
 
       return (
         <label
           key={block.id}
           data-testid="preview-form-input-wrapper"
-          className={`${tokens.wrapperLayoutClass} text-xs text-slate-200`}
+          className={wrapperClassName}
           style={tokens.wrapperStyle}
         >
-          <span>{props.label}</span>
+          {labelSpan}
           {props.inputType === "textarea" ? (
             <textarea
               data-testid="preview-form-input"
-              className={`${baseInputClass} ${tokens.widthClass}`}
+              className={`pb-textarea ${tokens.widthClass}`}
               style={tokens.inputStyle}
+              name={props.formFieldName}
+              required={isRequired}
               placeholder={props.placeholder || props.label}
             />
           ) : (
             <input
               data-testid="preview-form-input"
-              className={`${baseInputClass} ${tokens.widthClass}`}
+              className={`pb-input ${tokens.widthClass}`}
               style={tokens.inputStyle}
               type={props.inputType === "email" ? "email" : "text"}
+              name={props.formFieldName}
+              required={isRequired}
               placeholder={props.placeholder || props.label}
             />
           )}
@@ -163,17 +443,45 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       const props = block.props as FormSelectBlockProps;
       const tokens = computeFormSelectPublicTokens(props);
 
+      const isRequired = requiredFieldIdSet.has(block.id);
+
+      const labelDisplay = (props as any).labelDisplay ?? "visible";
+      const labelLayout = (props as any).labelLayout ?? "stacked";
+      const isInlineLayout = labelLayout === "inline" && labelDisplay === "visible";
+
+      const labelSpan =
+        labelDisplay === "hidden" ? (
+          <span className="sr-only">{props.label}</span>
+        ) : (
+          <span className="pb-form-label">{props.label}</span>
+        );
+
+      const gapPx = typeof (props as any).labelGapPx === "number" ? (props as any).labelGapPx : 8;
+      const gapEm = pxToEm(gapPx);
+
+      const wrapperClassName = [
+        isInlineLayout ? "flex items-center" : "flex flex-col gap-1",
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      const wrapperStyle: CSSProperties = isInlineLayout
+        ? { columnGap: gapEm }
+        : {};
+
       return (
-        <label key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
-          <span>{props.label}</span>
+        <label key={block.id} className={wrapperClassName} style={wrapperStyle}>
+          {labelSpan}
           <div
             data-testid="preview-form-select"
             className={`${tokens.widthClass}`}
             style={tokens.wrapperStyle}
           >
             <select
-              className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
+              className="pb-select"
               style={tokens.selectStyle}
+              name={props.formFieldName}
+              required={isRequired}
               defaultValue={props.options[0]?.value ?? ""}
             >
               {props.options.map((opt) => (
@@ -192,14 +500,45 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       const tokens = computeFormCheckboxPublicTokens(props);
       const groupLabelMode = props.groupLabelMode ?? "text";
 
+      const isRequired = requiredFieldIdSet.has(block.id);
+
+      const groupLabelDisplay = (props as any).groupLabelDisplay ?? "visible";
+      const labelLayout = (props as any).labelLayout ?? "stacked";
+      const isInlineLayout = labelLayout === "inline" && groupLabelDisplay === "visible";
+      const optionLayout = (props as any).optionLayout ?? "stacked";
+      const optionsLayoutClass = [
+        "pb-form-options",
+        optionLayout === "inline" ? "pb-form-options--inline" : "pb-form-options--stacked",
+      ].join(" ");
+
+      const groupLabelSpan =
+        groupLabelDisplay === "hidden" ? (
+          <span className="sr-only" style={tokens.groupTextStyle}>
+            {props.groupLabel}
+          </span>
+        ) : (
+          <span style={tokens.groupTextStyle}>{props.groupLabel}</span>
+        );
+
+      const gapPx = typeof (props as any).labelGapPx === "number" ? (props as any).labelGapPx : 8;
+      const gapEm = pxToEm(gapPx);
+
+      const baseClass = [tokens.textSizeClass, "text-slate-200", tokens.widthClass]
+        .filter(Boolean)
+        .join(" ");
+      const layoutClass = isInlineLayout ? "flex flex-row items-center" : "flex flex-col gap-1";
+
+      const groupStyle: CSSProperties = {
+        ...tokens.groupStyle,
+        ...(isInlineLayout ? { columnGap: gapEm } : {}),
+      };
+
       return (
         <div
           key={block.id}
           data-testid="preview-form-checkbox-group"
-          className={["flex flex-col gap-1", tokens.textSizeClass, "text-slate-200", tokens.widthClass]
-            .filter(Boolean)
-            .join(" ")}
-          style={tokens.groupStyle}
+          className={[layoutClass, baseClass].filter(Boolean).join(" ")}
+          style={groupStyle}
         >
           {groupLabelMode === "image" && props.groupLabelImageUrl ? (
             // eslint-disable-next-line @next/next/no-img-element
@@ -210,19 +549,26 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
               style={tokens.groupTextStyle}
             />
           ) : (
-            <span style={tokens.groupTextStyle}>{props.groupLabel}</span>
+            groupLabelSpan
           )}
-          <div className="flex flex-col" data-testid="preview-form-checkbox-options" style={tokens.optionsStyle}>
-            {props.options.map((opt) => (
+          <div
+            className={optionsLayoutClass}
+            data-testid="preview-form-checkbox-options"
+            style={tokens.optionsStyle}
+          >
+            {props.options.map((opt, index) => (
               <label
                 key={opt.value}
                 data-testid="preview-form-checkbox-option-container"
-                className="inline-flex items-center gap-1"
+                className="pb-form-option"
                 style={tokens.optionContainerStyle}
               >
                 <input
                   type="checkbox"
                   className="h-4 w-4 rounded border-slate-700 bg-slate-900 text-sky-500"
+                  name={props.formFieldName}
+                  value={opt.value}
+                  required={isRequired && index === 0}
                 />
                 {opt.labelImageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
@@ -249,14 +595,45 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       const tokens = computeFormRadioPublicTokens(props);
       const groupLabelMode = props.groupLabelMode ?? "text";
 
+      const isRequired = requiredFieldIdSet.has(block.id);
+
+      const groupLabelDisplay = (props as any).groupLabelDisplay ?? "visible";
+      const labelLayout = (props as any).labelLayout ?? "stacked";
+      const isInlineLayout = labelLayout === "inline" && groupLabelDisplay === "visible";
+      const optionLayout = (props as any).optionLayout ?? "stacked";
+      const optionsLayoutClass = [
+        "pb-form-options",
+        optionLayout === "inline" ? "pb-form-options--inline" : "pb-form-options--stacked",
+      ].join(" ");
+
+      const groupLabelSpan =
+        groupLabelDisplay === "hidden" ? (
+          <span className="sr-only" style={tokens.groupTextStyle}>
+            {props.groupLabel}
+          </span>
+        ) : (
+          <span style={tokens.groupTextStyle}>{props.groupLabel}</span>
+        );
+
+      const gapPx = typeof (props as any).labelGapPx === "number" ? (props as any).labelGapPx : 8;
+      const gapEm = pxToEm(gapPx);
+
+      const baseClass = [tokens.textSizeClass, "text-slate-200", tokens.widthClass]
+        .filter(Boolean)
+        .join(" ");
+      const layoutClass = isInlineLayout ? "flex flex-row items-center" : "flex flex-col gap-1";
+
+      const groupStyle: CSSProperties = {
+        ...tokens.groupStyle,
+        ...(isInlineLayout ? { columnGap: gapEm } : {}),
+      };
+
       return (
         <div
           key={block.id}
           data-testid="preview-form-radio-group"
-          className={["flex flex-col gap-1", tokens.textSizeClass, "text-slate-200", tokens.widthClass]
-            .filter(Boolean)
-            .join(" ")}
-          style={tokens.groupStyle}
+          className={[layoutClass, baseClass].filter(Boolean).join(" ")}
+          style={groupStyle}
         >
           {groupLabelMode === "image" && props.groupLabelImageUrl ? (
             // eslint-disable-next-line @next/next/no-img-element
@@ -267,19 +644,25 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
               style={tokens.groupTextStyle}
             />
           ) : (
-            <span style={tokens.groupTextStyle}>{props.groupLabel}</span>
+            groupLabelSpan
           )}
-          <div className="flex flex-col" data-testid="preview-form-radio-options" style={tokens.optionsStyle}>
-            {props.options.map((opt) => (
+          <div
+            className={optionsLayoutClass}
+            data-testid="preview-form-radio-options"
+            style={tokens.optionsStyle}
+          >
+            {props.options.map((opt, index) => (
               <label
                 key={opt.value}
-                className="inline-flex items-center gap-1"
+                className="pb-form-option"
                 style={tokens.optionContainerStyle}
               >
                 <input
                   type="radio"
                   className="h-4 w-4 border-slate-700 bg-slate-900 text-sky-500"
                   name={props.formFieldName}
+                  value={opt.value}
+                  required={isRequired && index === 0}
                 />
                 {opt.labelImageUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
@@ -339,7 +722,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
 
       let innerContent: React.ReactNode;
       if (!hasImage) {
-        innerContent = <span className="whitespace-pre-wrap">{props.label}</span>;
+        innerContent = props.label;
       } else {
         const src = (props as any).imageSrc as string;
         const altRaw = (props as any).imageAlt as string | undefined;
@@ -372,11 +755,57 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
         );
       }
 
-      return (
-        <div key={block.id} className={wrapperClass}>
-          <a href={props.href} className={buttonClassName} style={buttonStyle}>
+      const owningFormBlock = blocks.find(
+        (b) => b.type === "form" && (b.props as FormBlockProps).submitButtonId === block.id,
+      );
+      const isSubmitButton = (() => {
+        if (!owningFormBlock) return false;
+        const tokens = computeFormControllerPublicTokens(owningFormBlock, blocks);
+        return (tokens.fields ?? []).length > 0;
+      })();
+
+      const handleClick = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (!isSubmitButton || !owningFormBlock) {
+          return;
+        }
+
+        e.preventDefault();
+        await submitFormByController(owningFormBlock);
+      };
+
+      const anchor = (
+        <a
+          href={props.href}
+          className={buttonClassName}
+          style={buttonStyle}
+          onClick={isSubmitButton ? handleClick : undefined}
+        >
           {innerContent}
         </a>
+      );
+
+      if (!isSubmitButton) {
+        return (
+          <div key={block.id} className={wrapperClass}>
+            {anchor}
+          </div>
+        );
+      }
+
+      return (
+        <div key={block.id} className={wrapperClass}>
+          <div className="flex flex-col items-start gap-1">
+            {anchor}
+            {owningFormBlock && activeFormId === owningFormBlock.id && formStatus !== "idle" && formMessage ? (
+              <p
+                className={`text-xs mt-1 ${
+                  formStatus === "success" ? "text-emerald-400" : "text-rose-400"
+                }`}
+              >
+                {formMessage}
+              </p>
+            ) : null}
+          </div>
         </div>
       );
     }
@@ -532,10 +961,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
               )}
             </div>
             {props.captionText && props.captionText.trim() !== "" && (
-              <p
-                data-testid="preview-video-caption"
-                className="mt-2 text-xs text-slate-400 hidden"
-              >
+              <p data-testid="preview-video-caption" className="pb-video-caption">
                 {props.captionText}
               </p>
             )}
@@ -545,184 +971,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
     }
 
     if (block.type === "form") {
-      const props = block.props as FormBlockProps;
-      const tokens = computeFormControllerPublicTokens(block, blocks);
-      const fields = tokens.fields as any[];
-      const hasFields = fields.length > 0;
-      const submitLabelBase = tokens.submitLabel ?? (hasFields ? "폼 전송" : null);
-
-      const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-
-        const form = e.currentTarget;
-        const data = new FormData(form);
-
-        try {
-          setFormStatus("submitting");
-          setFormMessage("");
-
-          const res = await fetch("/api/forms/submit", {
-            method: "POST",
-            body: data,
-          });
-
-          if (res.ok) {
-            setFormStatus("success");
-            setFormMessage(props.successMessage ?? "성공적으로 전송되었습니다.");
-            form.reset();
-          } else {
-            setFormStatus("error");
-            setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
-          }
-        } catch (error) {
-          console.error("[PublicPageRenderer] form submit error", error);
-          setFormStatus("error");
-          setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
-        }
-      };
-
-      return (
-        <form
-          key={block.id}
-          data-testid="preview-form-controller"
-          className={tokens.formClassName}
-          style={tokens.formStyle}
-          onSubmit={handleSubmit}
-        >
-          {/* 폼 설정 전체를 서버로 함께 전달하기 위한 hidden 필드 */}
-          <input type="hidden" name="__config" value={JSON.stringify(props)} />
-          {projectSlug && projectSlug.trim() !== "" ? (
-            <input type="hidden" name="__projectSlug" value={projectSlug.trim()} />
-          ) : null}
-          {hasFields && (
-            <div className="flex flex-col gap-2 text-xs text-slate-200">
-              {fields.map((field: any) => (
-                <label key={field.id} className="flex flex-col gap-1">
-                  <span>{field.label}</span>
-                  {field.type === "textarea" ? (
-                    <textarea
-                      className="w-full min-h-[100px] rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
-                      name={field.name}
-                      placeholder={field.label}
-                      required={field.required}
-                    />
-                  ) : field.type === "select" ? (
-                    <select
-                      className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
-                      name={field.name}
-                      required={field.required}
-                      defaultValue={field.options?.[0]?.value ?? ""}
-                    >
-                      {(field.options ?? []).map((opt: FormSelectOption) => (
-                        <option key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </option>
-                      ))}
-                    </select>
-                  ) : field.type === "checkbox" ? (
-                    <div className="flex flex-col gap-1">
-                      {/* 그룹 타이틀: 텍스트/이미지 모드를 지원한다. alt 는 그룹 라벨 텍스트를 사용한다. */}
-                      {field.groupLabelMode === "image" && field.groupLabelImageUrl ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img
-                          src={field.groupLabelImageUrl}
-                          alt={field.label}
-                          className="max-h-10 w-auto max-w-[200px]"
-                        />
-                      ) : (
-                        <span>{field.label}</span>
-                      )}
-                      {(field.options ?? []).map((opt: FormCheckboxOption, index: number) => (
-                        <label key={opt.value} className="inline-flex items-center gap-1 text-xs">
-                          <input
-                            className="h-4 w-4 rounded border-slate-700 bg-slate-900 text-sky-500"
-                            type="checkbox"
-                            name={field.name}
-                            value={opt.value}
-                            required={field.required && index === 0}
-                          />
-                          {opt.labelImageUrl ? (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img
-                              src={opt.labelImageUrl}
-                              alt={opt.label || field.label || "체크박스 옵션"}
-                              className="h-4 w-auto"
-                            />
-                          ) : (
-                            <span>{opt.label}</span>
-                          )}
-                        </label>
-                      ))}
-                    </div>
-                  ) : field.type === "radio" ? (
-                    <div className="flex flex-col gap-1">
-                      {field.groupLabelMode === "image" && field.groupLabelImageUrl ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img
-                          src={field.groupLabelImageUrl}
-                          alt={field.label}
-                          className="max-h-10 w-auto max-w-[200px] md:max-w-[300px] lg:max-w-[400px]"
-                        />
-                      ) : (
-                        <span>{field.label}</span>
-                      )}
-                      {(field.options ?? []).map((opt: FormRadioOption, index: number) => (
-                        <label key={opt.value} className="inline-flex items-center gap-1 text-xs">
-                          <input
-                            type="radio"
-                            className="h-4 w-4 border-slate-700 bg-slate-900 text-sky-500"
-                            name={field.name}
-                            value={opt.value}
-                            required={field.required && index === 0}
-                          />
-                          {opt.labelImageUrl ? (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img
-                              src={opt.labelImageUrl}
-                              alt={opt.label || field.label || "라디오 옵션"}
-                              className="h-5 w-auto max-w-[120px]"
-                            />
-                          ) : (
-                            <span>{opt.label}</span>
-                          )}
-                        </label>
-                      ))}
-                    </div>
-                  ) : (
-                    <input
-                      className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
-                      name={field.name}
-                      type={field.type === "email" ? "email" : "text"}
-                      placeholder={field.label}
-                      required={field.required}
-                    />
-                  )}
-                </label>
-              ))}
-            </div>
-          )}
-
-          {submitLabelBase != null && (
-            <button
-              type="submit"
-              disabled={formStatus === "submitting"}
-              className="inline-flex items-center justify-center rounded border border-emerald-500 bg-emerald-600 px-4 py-2 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
-            >
-              {formStatus === "submitting" ? "전송 중..." : submitLabelBase}
-            </button>
-          )}
-
-          {formStatus !== "idle" && formMessage ? (
-            <p
-              className={`text-xs mt-1 ${
-                formStatus === "success" ? "text-emerald-400" : "text-rose-400"
-              }`}
-            >
-              {formMessage}
-            </p>
-          ) : null}
-        </form>
-      );
+      return null;
     }
 
     if (block.type === "image") {
@@ -748,18 +997,19 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
   const renderSection = (section: Block) => {
     const props = section.props as SectionBlockProps;
 
-    const { backgroundClass, paddingYClass, maxWidthClass, gapXClass, alignItemsClass } =
-      getSectionLayoutConfig(props);
-
     const columns = props.columns && props.columns.length > 0 ? props.columns : [{ id: `${section.id}_col`, span: 12 }];
     const tokens = computeSectionPublicTokens(props);
+    const exportTokens = computeSectionExportTokens(props);
+
+    const alignItems =
+      props.alignItems === "center" ? "center" : props.alignItems === "bottom" ? "flex-end" : "flex-start";
 
     return (
       <section
         key={section.id}
         data-testid="preview-section"
         data-section-id={section.id}
-        className={`${backgroundClass} ${typeof props.paddingYPx === "number" ? "" : paddingYClass}`}
+        className={exportTokens.sectionClasses}
         style={tokens.sectionStyle}
       >
         {tokens.hasBackgroundVideo && tokens.backgroundVideoSrc && (
@@ -775,20 +1025,27 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
         )}
         <div
           data-testid="preview-section-inner"
-          className={`mx-auto ${typeof props.maxWidthPx === "number" ? "" : maxWidthClass} px-4`}
+          className="pb-section-inner"
           style={tokens.innerWrapperStyle}
         >
           <div
             data-testid="preview-section-columns"
-            className={`flex ${typeof props.gapXPx === "number" ? "" : gapXClass} ${alignItemsClass}`}
-            style={tokens.columnsContainerStyle}
+            className="pb-section-columns"
+            style={{
+              ...tokens.columnsContainerStyle,
+              alignItems,
+            }}
           >
             {columns.map((col) => {
               const basis = `${(col.span / 12) * 100}%`;
               const columnBlocks = blocks.filter((b) => b.sectionId === section.id && b.columnId === col.id);
 
               return (
-                <div key={col.id} className="flex flex-col gap-4" style={{ flexBasis: basis }}>
+                <div
+                  key={col.id}
+                  className="pb-section-column"
+                  style={{ flexBasis: basis, display: "flex", flexDirection: "column", rowGap: "1rem" }}
+                >
                   {columnBlocks.map((b) => (
                     <div key={b.id}>{renderBlock(b)}</div>
                   ))}
@@ -803,10 +1060,10 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
 
   return (
     <div className="flex-1 flex flex-col text-slate-50">
-      {/* 루트 텍스트/버튼/이미지 블록들이 있다면 페이지 상단에 노출 */}
+      {/* 루트 텍스트/버튼/이미지 블록들이 있다면 pb-root 내에 페이지 상단에 노출 */}
       {rootBlocks.length > 0 && (
-        <section className="py-12">
-          <div className="mx-auto max-w-3xl px-4 flex flex-col gap-4">
+        <section className="pb-root">
+          <div className="pb-root-inner">
             {rootBlocks.map((b) => (
               <div key={b.id}>{renderBlock(b)}</div>
             ))}

src/features/editor/state/editorStore.ts

@@ -559,6 +559,7 @@ export interface FormFieldStyleProps {
   optionGapPx?: number;
   labelGapPx?: number;
   labelLayout?: "stacked" | "inline";
+  optionLayout?: "stacked" | "inline";
   borderRadius?: "none" | "sm" | "md" | "lg" | "full";
   // 필드 텍스트 색상/타이포그라피
   fontSizeCustom?: string;
@@ -580,6 +581,7 @@ export interface FormInputBlockProps extends FormFieldStyleProps {
   inputType?: "text" | "email" | "textarea";
   placeholder?: string;
   labelMode?: FormLabelMode;
+  labelDisplay?: "visible" | "hidden" | "floating";
   labelImageUrl?: string;
   labelImageAlt?: string;
 }
@@ -596,6 +598,7 @@ export interface FormSelectBlockProps extends FormFieldStyleProps {
   options: FormSelectOption[];
   required?: boolean;
   labelMode?: FormLabelMode;
+  labelDisplay?: "visible" | "hidden";
   labelImageUrl?: string;
   labelImageAlt?: string;
 }
@@ -615,6 +618,7 @@ export interface FormCheckboxBlockProps extends FormFieldStyleProps {
   required?: boolean;
   // 그룹 타이틀 자체도 텍스트/이미지 모드를 가질 수 있도록 분리한다.
   groupLabelMode?: FormLabelMode;
+  groupLabelDisplay?: "visible" | "hidden";
   groupLabelImageUrl?: string;
   groupLabelImageSource?: "url" | "upload";
   optionImageSource?: "url" | "upload";
@@ -635,6 +639,7 @@ export interface FormRadioBlockProps extends FormFieldStyleProps {
   required?: boolean;
   // 라디오 그룹 타이틀의 텍스트/이미지 모드
   groupLabelMode?: FormLabelMode;
+  groupLabelDisplay?: "visible" | "hidden";
   groupLabelImageUrl?: string;
   groupLabelImageSource?: "url" | "upload";
   optionImageSource?: "url" | "upload";
@@ -671,6 +676,8 @@ export interface FormBlockProps {
   fields?: FormFieldConfig[];
   // v2 컨트롤러: 개별 폼 요소 블록과 제출 버튼을 연결하기 위한 ID 목록
   fieldIds?: string[];
+  // v2 컨트롤러: fieldIds 로 연결된 필드 중 어떤 필드를 필수로 처리할지 관리하는 ID 목록
+  requiredFieldIds?: string[];
   submitButtonId?: string | null;
   // 폼 레이아웃
   formWidthMode?: "auto" | "full" | "fixed";

src/features/editor/utils/buttonHelpers.ts

@@ -18,6 +18,9 @@ export interface ButtonStyleInput {
   widthPx?: number | null | undefined;
   paddingX?: number | null | undefined;
   paddingY?: number | null | undefined;
+  fontSizeCustom?: string | null | undefined;
+  lineHeightCustom?: string | null | undefined;
+  letterSpacingCustom?: string | null | undefined;
   fillColorCustom?: string | null | undefined;
   strokeColorCustom?: string | null | undefined;
   textColorCustom?: string | null | undefined;
@@ -68,15 +71,13 @@ export function computeButtonPbTokens(input: ButtonStyleInput): ButtonPbTokens {
   }
 
   if (typeof input.paddingX === "number") {
-    const paddingInline = pxToEm(input.paddingX);
-    inlineStyles.push(`padding-left:${paddingInline}`);
-    inlineStyles.push(`padding-right:${paddingInline}`);
+    inlineStyles.push(`padding-left:${pxToEm(input.paddingX)}`);
+    inlineStyles.push(`padding-right:${pxToEm(input.paddingX)}`);
   }
 
   if (typeof input.paddingY === "number") {
-    const paddingBlock = pxToEm(input.paddingY);
-    inlineStyles.push(`padding-top:${paddingBlock}`);
-    inlineStyles.push(`padding-bottom:${paddingBlock}`);
+    inlineStyles.push(`padding-top:${pxToEm(input.paddingY)}`);
+    inlineStyles.push(`padding-bottom:${pxToEm(input.paddingY)}`);
   }
 
   if (input.fillColorCustom && input.fillColorCustom.trim() !== "") {
@@ -91,6 +92,42 @@ export function computeButtonPbTokens(input: ButtonStyleInput): ButtonPbTokens {
     inlineStyles.push(`color:${input.textColorCustom.trim()}`);
   }
 
+  if (input.fontSizeCustom && input.fontSizeCustom.trim() !== "") {
+    const fontSizeValue = input.fontSizeCustom.trim();
+    if (fontSizeValue.endsWith("px")) {
+      const fontSizeEm = convertPxStringToEm(fontSizeValue);
+      if (fontSizeEm) {
+        inlineStyles.push(`font-size:${fontSizeEm}`);
+      }
+    } else {
+      inlineStyles.push(`font-size:${fontSizeValue}`);
+    }
+  }
+
+  if (input.lineHeightCustom && input.lineHeightCustom.trim() !== "") {
+    const lineHeightValue = input.lineHeightCustom.trim();
+    if (lineHeightValue.endsWith("px")) {
+      const lineHeightEm = convertPxStringToEm(lineHeightValue);
+      if (lineHeightEm) {
+        inlineStyles.push(`line-height:${lineHeightEm}`);
+      }
+    } else {
+      inlineStyles.push(`line-height:${lineHeightValue}`);
+    }
+  }
+
+  if (input.letterSpacingCustom && input.letterSpacingCustom.trim() !== "") {
+    const letterSpacingValue = input.letterSpacingCustom.trim();
+    if (letterSpacingValue.endsWith("px")) {
+      const letterSpacingEm = convertPxStringToEm(letterSpacingValue);
+      if (letterSpacingEm) {
+        inlineStyles.push(`letter-spacing:${letterSpacingEm}`);
+      }
+    } else {
+      inlineStyles.push(`letter-spacing:${letterSpacingValue}`);
+    }
+  }
+
   return {
     alignClass,
     sizeClass,
@@ -155,11 +192,13 @@ export function computeButtonPublicTokens(props: ButtonBlockProps): ButtonPublic
   }
 
   if (typeof props.paddingX === "number" && props.paddingX >= 0) {
-    styleOverrides.paddingInline = pxToEm(props.paddingX);
+    const paddingEm = pxToEm(props.paddingX);
+    styleOverrides.paddingInline = paddingEm;
   }
 
   if (typeof props.paddingY === "number" && props.paddingY >= 0) {
-    styleOverrides.paddingBlock = pxToEm(props.paddingY);
+    const paddingEm = pxToEm(props.paddingY);
+    styleOverrides.paddingBlock = paddingEm;
   }
 
   if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {

src/features/editor/utils/dividerHelpers.ts

@@ -21,7 +21,33 @@ export const computeDividerExportTokens = (
   const marginY = typeof props.marginYPx === "number" && props.marginYPx > 0 ? props.marginYPx : 16;
   const marginEm = pxToEm(marginY);
 
-  const style = `border:0;border-bottom:${thickness} solid ${escapeAttr(color)};margin:${marginEm} 0;`;
+  const widthMode = props.widthMode ?? "full";
+  const align = props.align ?? "left";
+
+  const styleParts: string[] = [];
+  styleParts.push("border:0");
+  styleParts.push(`border-bottom:${thickness} solid ${escapeAttr(color)}`);
+  styleParts.push(`margin:${marginEm} 0`);
+
+  if (widthMode === "auto") {
+    styleParts.push("width:50%");
+  } else if (widthMode === "fixed") {
+    const widthPx =
+      typeof props.widthPx === "number" && props.widthPx > 0 ? props.widthPx : 320;
+    styleParts.push(`width:${pxToEm(widthPx)}`);
+  }
+
+  if (widthMode === "auto" || widthMode === "fixed") {
+    if (align === "center") {
+      styleParts.push("margin-left:auto");
+      styleParts.push("margin-right:auto");
+    } else if (align === "right") {
+      styleParts.push("margin-left:auto");
+      styleParts.push("margin-right:0");
+    }
+  }
+
+  const style = `${styleParts.join(";")};`;
 
   return { style };
 };

src/features/editor/utils/formHelpers.ts

@@ -42,6 +42,12 @@ const normalizeTextColor = (raw: unknown): string => {
   return trimmed !== "" ? trimmed : "";
 };
 
+// Export/Public 레이어용 모서리 둥글기 매핑
+// - none: 0px
+// - sm: 2px
+// - lg: 6px
+// - full: 9999px (완전 둥근 모서리)
+// - md(기본): 4px
 const computeRadiusPx = (radius: unknown): number => {
   const token = typeof radius === "string" ? radius : "md";
   if (token === "none") return 0;
@@ -51,6 +57,19 @@ const computeRadiusPx = (radius: unknown): number => {
   return 4;
 };
 
+// Editor 레이어용 모서리 둥글기 매핑
+// - none: 0px
+// - sm: 4px
+// - md: 8px (기본)
+// - lg/full: 9999px (pill 스타일)
+const computeEditorRadiusPx = (radius: unknown): number => {
+  const token = typeof radius === "string" ? radius : "md";
+  if (token === "none") return 0;
+  if (token === "sm") return 4;
+  if (token === "lg" || token === "full") return 9999;
+  return 8;
+};
+
 const computeWidthMode = (props: { widthMode?: string; fullWidth?: boolean }): "auto" | "full" | "fixed" => {
   if (typeof props.widthMode === "string") {
     return props.widthMode as "auto" | "full" | "fixed";
@@ -101,9 +120,68 @@ export const computeFormInputExportTokens = (
     inputStyleParts.push(`width:${em}em`);
   }
 
-  const radiusPx = computeRadiusPx(props.borderRadius);
+  const radiusToken = typeof props.borderRadius === "string" ? props.borderRadius : "md";
+  let radiusPx = 4;
+  if (radiusToken === "none") {
+    radiusPx = 0;
+  } else if (radiusToken === "sm") {
+    radiusPx = 2;
+  } else if (radiusToken === "lg") {
+    radiusPx = 6;
+  } else if (radiusToken === "full") {
+    radiusPx = 9999;
+  }
   inputStyleParts.push(`border-radius:${radiusPx}px`);
 
+  // 폰트 관련 커스텀 값: px 단위일 경우 em 으로 변환하고, 그렇지 않으면 원문 값을 그대로 사용한다.
+  if (typeof props.fontSizeCustom === "string" && props.fontSizeCustom.trim() !== "") {
+    const raw = props.fontSizeCustom.trim();
+    if (raw.endsWith("px")) {
+      const match = raw.match(/-?\d+(?:\.\d+)?/);
+      if (match) {
+        const px = parseFloat(match[0]);
+        if (Number.isFinite(px)) {
+          const em = px / 16;
+          inputStyleParts.push(`font-size:${em}em`);
+        }
+      }
+    } else {
+      inputStyleParts.push(`font-size:${escapeAttr(raw)}`);
+    }
+  }
+
+  if (typeof props.lineHeightCustom === "string" && props.lineHeightCustom.trim() !== "") {
+    const raw = props.lineHeightCustom.trim();
+    if (raw.endsWith("px")) {
+      const match = raw.match(/-?\d+(?:\.\d+)?/);
+      if (match) {
+        const px = parseFloat(match[0]);
+        if (Number.isFinite(px)) {
+          const em = px / 16;
+          inputStyleParts.push(`line-height:${em}em`);
+        }
+      }
+    } else {
+      inputStyleParts.push(`line-height:${escapeAttr(raw)}`);
+    }
+  }
+
+  if (typeof props.letterSpacingCustom === "string" && props.letterSpacingCustom.trim() !== "") {
+    const raw = props.letterSpacingCustom.trim();
+    if (raw.endsWith("px")) {
+      const match = raw.match(/-?\d+(?:\.\d+)?/);
+      if (match) {
+        const px = parseFloat(match[0]);
+        if (Number.isFinite(px)) {
+          const em = px / 16;
+          inputStyleParts.push(`letter-spacing:${em}em`);
+        }
+      }
+    } else {
+      inputStyleParts.push(`letter-spacing:${escapeAttr(raw)}`);
+    }
+  }
+
   const inputStyleAttr = inputStyleParts.length > 0 ? ` style="${inputStyleParts.join(";")}"` : "";
 
   return {
@@ -254,14 +332,9 @@ export const computeFormInputEditorTokens = (props: FormInputBlockProps): FormIn
     fieldStyle.width = `${props.widthPx}px`;
   }
 
-  const radius = props.borderRadius ?? "md";
-  if (radius === "none") {
-    fieldStyle.borderRadius = 0;
-  } else if (radius === "sm") {
-    fieldStyle.borderRadius = 4;
-  } else if (radius === "lg" || radius === "full") {
-    fieldStyle.borderRadius = 9999;
-  }
+  // 모서리 둥글기: Editor 레이어에서는 lg/full 토큰을 pill 형태(9999px)로 사용한다.
+  const radiusPx = computeEditorRadiusPx(props.borderRadius);
+  fieldStyle.borderRadius = radiusPx;
 
   // 에디터에서는 px 기반 padding/타이포 값을 그대로 fieldStyle 에 반영해 미리보기에서 변화가 보이도록 한다.
   if (typeof props.paddingX === "number" && props.paddingX >= 0) {
@@ -336,14 +409,9 @@ export const computeFormSelectEditorTokens = (props: FormSelectBlockProps): Form
     fieldStyle.width = `${props.widthPx}px`;
   }
 
-  const radius = props.borderRadius ?? "md";
-  if (radius === "none") {
-    fieldStyle.borderRadius = 0;
-  } else if (radius === "sm") {
-    fieldStyle.borderRadius = 4;
-  } else if (radius === "lg" || radius === "full") {
-    fieldStyle.borderRadius = 9999;
-  }
+  // 모서리 둥글기: Editor 레이어에서는 lg/full 토큰을 pill 형태(9999px)로 사용한다.
+  const selectRadiusPx = computeEditorRadiusPx(props.borderRadius);
+  fieldStyle.borderRadius = selectRadiusPx;
 
   // 체크박스/라디오 그룹도 에디터에서 padding/타이포 스타일을 일부 반영해준다.
   if (typeof props.paddingX === "number" && props.paddingX >= 0) {
@@ -389,14 +457,9 @@ export const computeFormOptionGroupEditorTokens = (
     fieldStyle.width = `${props.widthPx}px`;
   }
 
-  const radius = props.borderRadius ?? "md";
-  if (radius === "none") {
-    fieldStyle.borderRadius = 0;
-  } else if (radius === "sm") {
-    fieldStyle.borderRadius = 4;
-  } else if (radius === "lg" || radius === "full") {
-    fieldStyle.borderRadius = 9999;
-  }
+  // 모서리 둥글기: Editor 레이어에서는 lg/full 토큰을 pill 형태(9999px)로 사용한다.
+  const groupRadiusPx = computeEditorRadiusPx(props.borderRadius);
+  fieldStyle.borderRadius = groupRadiusPx;
   
   if (typeof props.paddingX === "number" && props.paddingX >= 0) {
     fieldStyle.paddingInline = `${props.paddingX}px`;
@@ -535,23 +598,18 @@ export const computeFormInputPublicTokens = (props: FormInputBlockProps): FormIn
     }
   }
 
-  // 색상 관련 커스텀 값
+  // 색상 관련 커스텀 값: builder.css 의 pb-input 기본 색상을 덮어쓰지 않도록,
+  // 사용자가 커스텀 값을 설정했을 때에만 인라인 스타일을 적용한다.
   if (props.textColorCustom && props.textColorCustom.trim() !== "") {
     inputStyle.color = props.textColorCustom.trim();
-  } else {
-    inputStyle.color = "#f9fafb";
   }
 
   if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {
     inputStyle.backgroundColor = props.fillColorCustom.trim();
-  } else {
-    inputStyle.backgroundColor = "#020617";
   }
 
   if (props.strokeColorCustom && props.strokeColorCustom.trim() !== "") {
     inputStyle.borderColor = props.strokeColorCustom.trim();
-  } else {
-    inputStyle.borderColor = "#334155";
   }
 
   if (typeof props.paddingX === "number" && props.paddingX >= 0) {
@@ -629,14 +687,12 @@ export const computeFormSelectPublicTokens = (props: FormSelectBlockProps): Form
     }
   }
 
-  // 텍스트 색상: textColorCustom 이 설정되어 있으면 해당 색상을 사용하고, 없으면 기본 밝은 텍스트 색상을 사용한다.
+  // 텍스트 색상: textColorCustom 이 설정되어 있으면 해당 색상을 사용하고,
+  // 없으면 builder.css 의 pb-select 기본 색상을 그대로 사용한다.
   if (props.textColorCustom && props.textColorCustom.trim() !== "") {
     const colorValue = props.textColorCustom.trim();
     wrapperStyle.color = colorValue;
     selectStyle.color = colorValue;
-  } else {
-    wrapperStyle.color = "#f9fafb";
-    selectStyle.color = "#f9fafb";
   }
 
   // 배경/테두리 색상: fillColorCustom/strokeColorCustom 이 있으면 select 에 적용한다.
@@ -694,6 +750,7 @@ const computeOptionGroupPublicTokensBase = (
   const textSizeClass = props.fontSizeCustom && props.fontSizeCustom.trim() !== "" ? "" : "text-xs";
 
   if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+    // 퍼블릭 토큰에서는 고정 너비를 em 단위로 변환해 px 단위를 피한다.
     groupStyle.width = pxToEm(props.widthPx);
   }
 
@@ -783,7 +840,12 @@ const computeOptionGroupPublicTokensBase = (
   optionContainerStyle.borderRadius = `${radiusPx}px`;
 
   if (typeof props.optionGapPx === "number" && props.optionGapPx >= 0) {
-    optionsStyle.rowGap = pxToEm(props.optionGapPx);
+    const gapPx = props.optionGapPx;
+    const gapEm = pxToEm(gapPx);
+    optionsStyle.rowGap = gapEm;
+    if ((props as any).optionLayout === "inline") {
+      optionsStyle.columnGap = gapEm;
+    }
   }
 
   return {
@@ -844,6 +906,10 @@ export const computeFormControllerPublicTokens = (
         .map((fieldBlock) => {
           const anyProps: any = fieldBlock.props ?? {};
 
+          const isRequired = Array.isArray(props.requiredFieldIds)
+            ? props.requiredFieldIds.includes(fieldBlock.id)
+            : false;
+
           if (fieldBlock.type === "formInput") {
             const name = anyProps.formFieldName ?? fieldBlock.id;
             const label = anyProps.label ?? anyProps.formFieldName ?? "입력 필드";
@@ -854,7 +920,7 @@ export const computeFormControllerPublicTokens = (
               label,
               // 기존 PublicPageRenderer 컨트롤러 로직과 동일하게 formInput 은 항상 type "text" 로 취급한다.
               type: "text",
-              required: Boolean(anyProps.required),
+              required: isRequired,
             } satisfies FormControllerFieldPublicConfig;
           }
 
@@ -869,7 +935,7 @@ export const computeFormControllerPublicTokens = (
               label,
               type: "select",
               options,
-              required: Boolean(anyProps.required),
+              required: isRequired,
             } satisfies FormControllerFieldPublicConfig;
           }
 
@@ -886,7 +952,7 @@ export const computeFormControllerPublicTokens = (
               options,
               groupLabelMode: anyProps.groupLabelMode,
               groupLabelImageUrl: anyProps.groupLabelImageUrl,
-              required: Boolean(anyProps.required),
+              required: isRequired,
             } satisfies FormControllerFieldPublicConfig;
           }
 
@@ -902,23 +968,14 @@ export const computeFormControllerPublicTokens = (
             options,
             groupLabelMode: anyProps.groupLabelMode,
             groupLabelImageUrl: anyProps.groupLabelImageUrl,
-            required: Boolean(anyProps.required),
+            required: isRequired,
           } satisfies FormControllerFieldPublicConfig;
         })
     : [];
 
-  const fields: FormControllerFieldPublicConfig[] =
-    hasControllerFields && controllerFields.length > 0
-      ? controllerFields
-      : Array.isArray(props.fields) && props.fields.length > 0
-        ? props.fields.map((field) => ({
-            id: field.id,
-            name: field.name,
-            label: field.label,
-            type: field.type,
-            required: field.required,
-          }))
-        : [];
+  // 프리뷰/퍼블릭 렌더러에서는 FormBlock 의 v1 fields 설정을 사용하지 않고,
+  // fieldIds 로 연결된 실제 폼 필드 블록들만 기반으로 폼 필드를 렌더링한다.
+  const fields: FormControllerFieldPublicConfig[] = controllerFields;
 
   const mappedSubmitButton = blocks.find(
     (b) => b.type === "button" && b.id === props.submitButtonId,

src/features/editor/utils/listHelpers.ts

@@ -5,6 +5,7 @@ export interface ListExportTokens {
   Tag: "ul" | "ol";
   items: string[];
   listStyleParts: string[];
+  gapEm: number;
 }
 
 export const computeListExportTokens = (props: ListBlockProps): ListExportTokens => {
@@ -37,6 +38,21 @@ export const computeListExportTokens = (props: ListBlockProps): ListExportTokens
   const align = alignToken === "center" ? "center" : alignToken === "right" ? "right" : "left";
 
   const listStyleParts: string[] = [`text-align:${align}`];
+
+  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
+  const bulletStyle = bulletStyleRaw === "none" ? "none" : bulletStyleRaw;
+  listStyleParts.push(`list-style-type:${bulletStyle}`);
+
+  const gapPx =
+    typeof props.gapYPx === "number"
+      ? props.gapYPx
+      : props.gapY === "sm"
+        ? 4
+        : props.gapY === "lg"
+          ? 16
+          : 8;
+  const gapEm = gapPx / 16;
+
   if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
     listStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
   }
@@ -45,6 +61,7 @@ export const computeListExportTokens = (props: ListBlockProps): ListExportTokens
     Tag,
     items,
     listStyleParts,
+    gapEm,
   };
 };
 
@@ -106,7 +123,11 @@ const convertPxStringToEm = (value?: string | null) => {
 
 export const computeListPublicTokens = (props: ListBlockProps): ListPublicTokens => {
   const alignClass =
-    props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";
+    props.align === "center"
+      ? "pb-text-center"
+      : props.align === "right"
+        ? "pb-text-right"
+        : "pb-text-left";
 
   const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
 

src/features/editor/utils/sectionHelpers.ts

@@ -1,9 +1,13 @@
 import type { CSSProperties } from "react";
 import type { SectionBlockProps } from "@/features/editor/state/editorStore";
 
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
 export interface SectionExportTokens {
   sectionClasses: string;
   sectionStyleParts: string[];
+  innerWrapperStyleParts: string[];
+  columnsStyleParts: string[];
   backgroundVideoHtml: string;
 }
 
@@ -26,6 +30,8 @@ export function computeSectionExportTokens(props: SectionBlockProps): SectionExp
 
   const sectionClasses = ["pb-section", bgClass, pyClass].filter(Boolean).join(" ");
   const sectionStyleParts: string[] = [];
+  const innerWrapperStyleParts: string[] = [];
+  const columnsStyleParts: string[] = [];
 
   if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
     sectionStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
@@ -65,6 +71,20 @@ export function computeSectionExportTokens(props: SectionBlockProps): SectionExp
     sectionStyleParts.push(`background-repeat:${repeat}`);
   }
 
+  if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
+    const paddingEm = pxToEm(props.paddingYPx);
+    sectionStyleParts.push(`padding-top:${paddingEm}`);
+    sectionStyleParts.push(`padding-bottom:${paddingEm}`);
+  }
+
+  if (typeof props.maxWidthPx === "number" && props.maxWidthPx > 0) {
+    innerWrapperStyleParts.push(`max-width:${pxToEm(props.maxWidthPx)}`);
+  }
+
+  if (typeof props.gapXPx === "number" && props.gapXPx > 0) {
+    columnsStyleParts.push(`column-gap:${pxToEm(props.gapXPx)}`);
+  }
+
   const bgVideoSrc = props.backgroundVideoSrc;
   let backgroundVideoHtml = "";
   if (typeof bgVideoSrc === "string" && bgVideoSrc.trim() !== "") {
@@ -77,6 +97,8 @@ export function computeSectionExportTokens(props: SectionBlockProps): SectionExp
   return {
     sectionClasses,
     sectionStyleParts,
+    innerWrapperStyleParts,
+    columnsStyleParts,
     backgroundVideoHtml,
   };
 }
@@ -89,8 +111,6 @@ export interface SectionPublicTokens {
   backgroundVideoSrc: string | null;
 }
 
-const pxToEm = (px: number, base = 16) => `${px / base}em`;
-
 export function computeSectionPublicTokens(props: SectionBlockProps): SectionPublicTokens {
   const sectionStyle: CSSProperties = {};
 

src/features/editor/utils/textHelpers.ts

@@ -58,8 +58,10 @@ export function computeTextPbTokens(input: TextStyleInput): TextPbTokens {
     align === "center" ? "pb-text-center" : align === "right" ? "pb-text-right" : "pb-text-left";
 
   const fontSizeMode = input.fontSizeMode ?? "scale";
-  const fallbackScale: TextFontSizeScale = input.size === "sm" ? "sm" : input.size === "lg" ? "lg" : "base";
-  const fontSizeScale: TextFontSizeScale = (input.fontSizeScale as TextFontSizeScale | null) ?? fallbackScale;
+  const fallbackScale: TextFontSizeScale =
+    input.size === "sm" ? "sm" : input.size === "lg" ? "lg" : "base";
+  const fontSizeScale: TextFontSizeScale =
+    (input.fontSizeScale as TextFontSizeScale | null) ?? fallbackScale;
 
   const fontSizeMap: Record<TextFontSizeScale, string> = {
     xs: "pb-text-xs",
@@ -71,8 +73,7 @@ export function computeTextPbTokens(input: TextStyleInput): TextPbTokens {
     "3xl": "pb-text-3xl",
   };
 
-  const sizeClass =
-    fontSizeMode === "scale" && fontSizeScale && fontSizeMap[fontSizeScale]
+  const sizeClass = fontSizeScale && fontSizeMap[fontSizeScale]
     ? fontSizeMap[fontSizeScale]
     : "";
 

src/features/export/buildStaticHtml.ts

@@ -0,0 +1 @@
+export { buildStaticHtml } from "@/app/api/export/route";

src/features/projects/publicCache.ts

@@ -0,0 +1,25 @@
+import type { Block } from "@/features/editor/state/editorStore";
+
+interface PublicProjectSnapshot {
+  slug: string;
+  title: string;
+  contentJson: Block[];
+}
+
+function getStore(): Map<string, PublicProjectSnapshot> {
+  const g = globalThis as any;
+  if (!g.__PB_PUBLIC_PROJECTS) {
+    g.__PB_PUBLIC_PROJECTS = new Map<string, PublicProjectSnapshot>();
+  }
+  return g.__PB_PUBLIC_PROJECTS as Map<string, PublicProjectSnapshot>;
+}
+
+export function cachePublicProject(snapshot: PublicProjectSnapshot): void {
+  const store = getStore();
+  store.set(snapshot.slug, snapshot);
+}
+
+export function getCachedPublicProject(slug: string): PublicProjectSnapshot | null {
+  const store = getStore();
+  return store.get(slug) ?? null;
+}

src/styles/builder.css

@@ -201,6 +201,19 @@ body {
   white-space: pre-wrap;
 }
 
+/* Screen reader only utility (공통 sr-only 클래스) */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .pb-scroll {
   scrollbar-width: thin;
   scrollbar-color: #1f2937 #020617;
@@ -260,7 +273,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-weight: 500;
   border-width: 1px;
   text-decoration: none;
@@ -421,11 +434,67 @@ body {
   gap: 0.25rem;
 }
 
+.pb-form-field--floating {
+  position: relative;
+  margin-top: 0.5rem; /* 윗쪽 엘리먼트와는 살짝만 띄우고, 간격이 너무 넓지 않도록 조정한다. */
+  /* 플로팅 라벨이 사용하는 공통 세로 패딩 기준값.
+     이 값을 변경하면 인풋 높이와 라벨 위치가 함께 조정되도록 한다. */
+  --pb-input-padding-y: 0.5rem;
+}
+
+.pb-form-field--floating .pb-form-label {
+  position: absolute;
+  /* 인풋 내부 세로 패딩을 기준으로 라벨의 기본 위치를 계산한다. */
+  top: calc(var(--pb-input-padding-y) + 0.3rem);
+  left: 0.75rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  pointer-events: none;
+  transform-origin: left top;
+  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
+}
+
+.pb-form-field--floating .pb-input,
+.pb-form-field--floating .pb-textarea {
+  margin-top: 0.25rem;
+  /* 기본 세로 패딩 + 라벨이 들어갈 여유 공간을 함께 적용한다. */
+  padding-top: calc(var(--pb-input-padding-y) + 1rem);
+  padding-bottom: var(--pb-input-padding-y);
+  /* 세로 패딩을 0으로 줄이더라도 플로팅 라벨이 지나치게 눌리지 않도록 최소 높이를 보장한다. */
+  min-height: 2.5rem;
+}
+
+/* 포커스되었거나 값이 입력되어 placeholder 가 사라진 경우, 라벨을 인풋 바깥(상단 보더 근처)으로 플로팅한다. */
+.pb-form-field--floating .pb-input:focus ~ .pb-form-label,
+.pb-form-field--floating .pb-input:not(:placeholder-shown) ~ .pb-form-label,
+.pb-form-field--floating .pb-textarea:focus ~ .pb-form-label,
+.pb-form-field--floating .pb-textarea:not(:placeholder-shown) ~ .pb-form-label {
+  top: -0.3rem; /* 인풋 상단 보더에 살짝 겹치는 정도로만 띄운다. */
+  font-size: 0.725rem;
+  color: #e5e7eb;
+  background-color: #020617; /* 인풋 배경과 맞춰서 보더 라인을 자연스럽게 가린다. */
+  padding: 0 0.25rem;
+}
+
 .pb-form-label {
   font-size: 0.75rem;
   color: #e5e7eb;
 }
 
+.pb-form-options {
+  display: flex;
+  font-size: 0.75rem;
+}
+
+.pb-form-options--stacked {
+  flex-direction: column;
+}
+
+.pb-form-options--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .pb-form-option {
   display: flex;
   align-items: center;
@@ -441,12 +510,19 @@ body {
   border-radius: 0.375rem;
   border: 1px solid #1f2937;
   background-color: #020617;
-  padding: 0.5rem 0.75rem;
+  /* 세로 패딩은 CSS 변수로 정의해 플로팅 라벨/에디터 등이 함께 참조할 수 있게 한다. */
+  padding: var(--pb-input-padding-y, 0.5rem) 0.75rem;
   font-size: 0.75rem;
   color: #e5e7eb;
   box-sizing: border-box;
 }
 
+/* 기본 인풋/셀렉트도 일정 높이 이상을 유지해, 세로 패딩을 0 에 가깝게 줄이더라도 UI 가 붕괴되지 않도록 한다. */
+.pb-input,
+.pb-select {
+  min-height: 2.5rem;
+}
+
 .pb-textarea {
   min-height: 6rem;
 }

src/styles/editor.css

@@ -0,0 +1,10 @@
+/*
+ * editor.css
+ * - 에디터/프리뷰 상단 바, 좌우 패널, 캔버스 외곽 등 "에디터 크롬" 전용 스타일을 정의한다.
+ * - 콘텐츠 블록(text/button/image/video/list/section/form 등)의 모양은 builder.css(pb-*) + 인라인 스타일로만 제어하고,
+ *   이 파일에서는 블록 내부 스타일을 절대 정의하지 않는다.
+ */
+
+/* 초기 상태에서는 별도 규칙 없이 파일만 생성해 두고,
+ * 이후 에디터 전용 레이아웃/패널 스타일을 점진적으로 이동시킨다.
+ */

tests/api/export.spec.ts

@@ -531,6 +531,520 @@ describe("/api/export", () => {
     expect(formHtml).toContain('name="__config"');
   });
 
+  it("formInput 플로팅 라벨은 Export 에서 placeholder 텍스트와 라벨이 겹치지 않아야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_floating_1",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fields: [],
+          fieldIds: ["field_name"],
+          submitButtonId: null,
+          formWidthMode: "full",
+        },
+      } as any,
+      {
+        id: "field_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          labelDisplay: "floating",
+          // placeholder 가 라벨과 같을 때도 Export 에서는 placeholder 텍스트가 인풋 안에 보이지 않아야 한다.
+          placeholder: "이름",
+          required: true,
+        } as any,
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "플로팅 라벨 Export 테스트",
+      slug: "form-floating-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handleExport } = await import("@/app/api/export/route");
+
+    const res = await handleExport(
+      new Request(`${BASE_URL}/api/export`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+
+    const arrayBuffer = await res.arrayBuffer();
+    const zip = await JSZip.loadAsync(arrayBuffer);
+
+    const indexEntry = zip.file("index.html");
+    expect(indexEntry).toBeTruthy();
+
+    const html = await indexEntry!.async("string");
+
+    // 플로팅 라벨의 컨테이너는 pb-form-field pb-form-field--floating 클래스를 포함해야 한다.
+    expect(html).toContain("pb-form-field pb-form-field--floating");
+
+    // name="name" 인 input 태그를 찾아 placeholder 를 검사한다.
+    const inputMatch = html.match(/<input[^>]*name=\"name\"[^>]*>/);
+    expect(inputMatch).not.toBeNull();
+
+    const inputTag = inputMatch![0];
+    // placeholder 안에 "이름" 텍스트가 그대로 노출되면 안 된다.
+    expect(inputTag).not.toContain('placeholder="이름"');
+    // 대신 플로팅 라벨 전용으로 공백 placeholder 를 사용한다.
+    expect(inputTag).toContain('placeholder=" "');
+
+    // 플로팅 라벨 컨테이너 내부에서 input 이 label 보다 먼저 나와야 CSS sibling 기반 플로팅이 동작한다.
+    const fieldMatch = html.match(
+      /<div class=\"pb-form-field pb-form-field--floating\">([\s\S]*?)<\/div>/,
+    );
+    expect(fieldMatch).not.toBeNull();
+    const fieldInner = fieldMatch![1];
+
+    const inputIndex = fieldInner.indexOf("<input");
+    const labelIndex = fieldInner.indexOf("<label");
+    expect(inputIndex).toBeGreaterThanOrEqual(0);
+    expect(labelIndex).toBeGreaterThanOrEqual(0);
+    expect(inputIndex).toBeLessThan(labelIndex);
+  });
+
+  it("formSelect 라벨 레이아웃(inline)이 Export HTML 에도 반영되어야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_export_1",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fields: [],
+          fieldIds: ["select_plan"],
+          submitButtonId: null,
+          formWidthMode: "full",
+        },
+      } as any,
+      {
+        id: "select_plan",
+        type: "formSelect",
+        props: {
+          label: "플랜",
+          formFieldName: "plan",
+          options: [
+            { label: "Basic", value: "basic" },
+            { label: "Pro", value: "pro" },
+          ],
+          labelDisplay: "visible",
+          labelLayout: "inline",
+          labelGapPx: 16,
+        } as any,
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "셀렉트 라벨/레이아웃 Export 테스트",
+      slug: "form-select-layout-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handleExport } = await import("@/app/api/export/route");
+
+    const res = await handleExport(
+      new Request(`${BASE_URL}/api/export`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+
+    const arrayBuffer = await res.arrayBuffer();
+    const zip = await JSZip.loadAsync(arrayBuffer);
+
+    const indexEntry = zip.file("index.html");
+    expect(indexEntry).toBeTruthy();
+
+    const html = await indexEntry!.async("string");
+
+    // 라벨 표시 방식 visible + inline 레이아웃: pb-form-label 이 정상적으로 노출되어야 한다.
+    expect(html).toMatch(/<label class=\"pb-form-label\"[^>]*>플랜<\/label>/);
+
+    // inline 레이아웃: pb-form-field 컨테이너에 flex-direction:row / align-items:center / column-gap 이 style 로 반영되어야 한다.
+    // labelGapPx: 16px -> 1em
+    const divMatch = html.match(/<div class=\"pb-form-field\"[^>]*style=\"([^\"]*)\"[^>]*>/);
+    expect(divMatch).not.toBeNull();
+    const styleAttr = divMatch![1];
+    expect(styleAttr).toContain("flex-direction:row");
+    expect(styleAttr).toContain("align-items:center");
+    expect(styleAttr).toContain("column-gap:1em");
+  });
+
+  it("formInput 라벨 표시 방식 hidden/floating 이 Export HTML 에도 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_hidden_export",
+        type: "formInput",
+        props: {
+          label: "숨김 라벨",
+          formFieldName: "hidden_label",
+          labelDisplay: "hidden",
+        },
+      } as any,
+      {
+        id: "form_input_floating_export",
+        type: "formInput",
+        props: {
+          label: "플로팅 라벨",
+          formFieldName: "floating_label",
+          labelDisplay: "floating",
+          placeholder: "플로팅 플레이스홀더",
+          paddingY: 16,
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "formInput 라벨 표시 방식 Export 테스트",
+      slug: "form-input-label-display-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    // hidden: pb-form-label sr-only 로 렌더되어야 한다.
+    expect(html).toMatch(
+      /<div class="pb-form-field">\s*<input class="pb-input"[^>]*name="hidden_label"[^>]*>\s*<label class="pb-form-label sr-only"[^>]*>숨김 라벨<\/label>\s*<\/div>/,
+    );
+
+    // floating: pb-form-field pb-form-field--floating + placeholder=" " + pb-form-label 구조를 사용해야 한다.
+    expect(html).toMatch(
+      /<div class="pb-form-field pb-form-field--floating"[^>]*>\s*<input class="pb-input"[^>]*name="floating_label"[^>]*placeholder=" "[^>]*>\s*<label class="pb-form-label"[^>]*>플로팅 라벨<\/label>\s*<\/div>/,
+    );
+
+    const floatingDivMatch = html.match(
+      /<div class="pb-form-field pb-form-field--floating"([^>]*)>/,
+    );
+    expect(floatingDivMatch).not.toBeNull();
+    expect(floatingDivMatch![1]).toContain('style="--pb-input-padding-y:1rem"');
+  });
+
+  it("formInput Export HTML 은 label 과 input 을 for/id 로 연결해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_hidden_export_for_id",
+        type: "formInput",
+        props: {
+          label: "숨김 라벨",
+          formFieldName: "hidden_label_for_id",
+          labelDisplay: "hidden",
+        },
+      } as any,
+      {
+        id: "form_input_floating_export_for_id",
+        type: "formInput",
+        props: {
+          label: "플로팅 라벨",
+          formFieldName: "floating_label_for_id",
+          labelDisplay: "floating",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "formInput for/id Export 테스트",
+      slug: "form-input-for-id-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    expect(html).toMatch(
+      /<input[^>]*name="hidden_label_for_id"[^>]*id="hidden_label_for_id"[^>]*>/,
+    );
+    expect(html).toMatch(
+      /<label[^>]*for="hidden_label_for_id"[^>]*>숨김 라벨<\/label>/,
+    );
+
+    expect(html).toMatch(
+      /<input[^>]*name="floating_label_for_id"[^>]*id="floating_label_for_id"[^>]*>/,
+    );
+    expect(html).toMatch(
+      /<label[^>]*for="floating_label_for_id"[^>]*>플로팅 라벨<\/label>/,
+    );
+  });
+
+  it("formSelect Export HTML 은 name 과 option value 를 정확히 반영해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "select_export_attrs",
+        type: "formSelect",
+        props: {
+          label: "플랜",
+          formFieldName: "plan",
+          options: [
+            { label: "Basic", value: "basic" },
+            { label: "Pro", value: "pro" },
+          ],
+          required: true,
+        } as any,
+      },
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "formSelect Export 속성 테스트",
+      slug: "form-select-attrs-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    expect(html).toMatch(/<select[^>]*class="pb-select"[^>]*name="plan"[^>]*required[^>]*>/);
+    expect(html).toContain('<option value="basic">Basic<\/option>'.replace("\\/", "/"));
+    expect(html).toContain('<option value="pro">Pro<\/option>'.replace("\\/", "/"));
+  });
+
+  it("formCheckbox/formRadio Export HTML 의 input 은 type/name/value 를 정확히 반영해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "features_export_attrs",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "기능",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+        } as any,
+      },
+      {
+        id: "choices_export_attrs",
+        type: "formRadio",
+        props: {
+          groupLabel: "선택",
+          formFieldName: "choice",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "formCheckbox/formRadio Export 속성 테스트",
+      slug: "form-option-attrs-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    // 체크박스 옵션 input: type="checkbox" name="features" value="opt1"/"opt2"
+    expect(html).toMatch(/<input type="checkbox"[^>]*name="features"[^>]*value="opt1"[^>]*>/);
+    expect(html).toMatch(/<input type="checkbox"[^>]*name="features"[^>]*value="opt2"[^>]*>/);
+
+    // 라디오 옵션 input: type="radio" name="choice" value="a"/"b"
+    expect(html).toMatch(/<input type="radio"[^>]*name="choice"[^>]*value="a"[^>]*>/);
+    expect(html).toMatch(/<input type="radio"[^>]*name="choice"[^>]*value="b"[^>]*>/);
+  });
+
+  it("FormBlock.requiredFieldIds 는 Export HTML input/select 의 required 속성에도 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_required_export",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fieldIds: ["field_name", "field_plan"],
+          requiredFieldIds: ["field_name", "field_plan"],
+        } as any,
+      },
+      {
+        id: "field_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          required: false,
+        } as any,
+      },
+      {
+        id: "field_plan",
+        type: "formRadio",
+        props: {
+          groupLabel: "플랜",
+          formFieldName: "plan",
+          options: [
+            { label: "Basic", value: "basic" },
+            { label: "Pro", value: "pro" },
+          ],
+        } as any,
+      },
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "FormBlock required Export 테스트",
+      slug: "form-required-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const html = buildStaticHtml(blocks, projectConfig);
+
+    // field_name 은 FormBlock.requiredFieldIds 로 인해 required 이어야 한다.
+    expect(html).toMatch(/<input[^>]*name="name"[^>]*required[^>]*>/);
+
+    // 라디오 그룹에서는 첫 번째 옵션만 required 여야 한다.
+    const firstRadioMatch = html.match(/<input type="radio"[^>]*name="plan"[^>]*value="basic"[^>]*>/);
+    const secondRadioMatch = html.match(/<input type="radio"[^>]*name="plan"[^>]*value="pro"[^>]*>/);
+
+    expect(firstRadioMatch).not.toBeNull();
+    expect(firstRadioMatch![0]).toContain("required");
+    expect(secondRadioMatch).not.toBeNull();
+    expect(secondRadioMatch![0]).not.toContain("required");
+  });
+
+  it("formCheckbox/formRadio 의 optionLayout 값이 Export HTML 의 pb-form-options 컨테이너 클래스로 반영되어야 한다", () => {
+    const checkboxBlocks: Block[] = [
+      {
+        id: "features_export_options",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "기능",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+          optionLayout: "stacked",
+        },
+      } as any,
+    ];
+
+    const radioBlocks: Block[] = [
+      {
+        id: "choices_export_options",
+        type: "formRadio",
+        props: {
+          groupLabel: "선택",
+          formFieldName: "choice",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+          optionLayout: "inline",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "옵션 레이아웃 Export 테스트",
+      slug: "form-option-layout-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const checkboxHtml = buildStaticHtml(checkboxBlocks, projectConfig);
+    expect(checkboxHtml).toContain('class="pb-form-options pb-form-options--stacked"');
+
+    const radioHtml = buildStaticHtml(radioBlocks, projectConfig);
+    expect(radioHtml).toContain('class="pb-form-options pb-form-options--inline"');
+    // 각 옵션 라벨은 pb-form-option 클래스를 사용해야 한다.
+    expect(radioHtml).toContain('class="pb-form-option"');
+  });
+
+  it("formCheckbox/formRadio 그룹 타이틀 표시 방식과 레이아웃이 Export HTML 에도 반영되어야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_group_export_1",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          fields: [],
+          fieldIds: ["features", "choices"],
+          submitButtonId: null,
+          formWidthMode: "full",
+        },
+      } as any,
+      {
+        id: "features",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "기능",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+          groupLabelDisplay: "hidden",
+          labelLayout: "inline",
+          labelGapPx: 8,
+        } as any,
+      } as any,
+      {
+        id: "choices",
+        type: "formRadio",
+        props: {
+          groupLabel: "선택",
+          formFieldName: "choice",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+          groupLabelDisplay: "visible",
+          labelLayout: "inline",
+          labelGapPx: 24,
+        } as any,
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "체크박스/라디오 그룹 라벨 Export 테스트",
+      slug: "form-group-layout-export-test",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handleExport } = await import("@/app/api/export/route");
+
+    const res = await handleExport(
+      new Request(`${BASE_URL}/api/export`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+
+    const arrayBuffer = await res.arrayBuffer();
+    const zip = await JSZip.loadAsync(arrayBuffer);
+
+    const indexEntry = zip.file("index.html");
+    expect(indexEntry).toBeTruthy();
+
+    const html = await indexEntry!.async("string");
+
+    // 체크박스 그룹: groupLabelDisplay hidden -> pb-form-label sr-only 여야 한다.
+    expect(html).toContain('<label class="pb-form-label sr-only"');
+
+    // 라디오 그룹: inline 레이아웃 + labelGapPx 24px -> column-gap:1.5em, 세로 중앙 정렬이 pb-form-field style 에 반영되어야 한다.
+    const radioDivMatch = html.match(/<div class=\"pb-form-field\"[^>]*style=\"([^\"]*)\"[^>]*>[^]*선택[^]*<label class=\"pb-form-option/);
+    expect(radioDivMatch).not.toBeNull();
+    const radioStyle = radioDivMatch![1];
+    expect(radioStyle).toContain("flex-direction:row");
+    expect(radioStyle).toContain("align-items:center");
+    expect(radioStyle).toContain("column-gap:1.5em");
+  });
+
 
   it("FormBlock 에 fieldIds/fields 가 모두 없으면 Export 에서 아무 <form>/필드도 생성하지 않아야 한다", async () => {
     const blocks: Block[] = [
@@ -2231,6 +2745,9 @@ describe("/api/export", () => {
             fillColorCustom: "#123456",
             strokeColorCustom: "#ff0000",
             borderRadius: "lg",
+            fontSizeCustom: "24px",
+            lineHeightCustom: "30px",
+            letterSpacingCustom: "2px",
           },
         } as any,
       ];
@@ -2271,6 +2788,9 @@ describe("/api/export", () => {
       expect(html).toContain("background-color:#123456");
       expect(html).toContain("border-color:#ff0000");
       expect(html).toContain("border-radius:6px");
+      expect(html).toContain("font-size:1.5em");
+      expect(html).toContain("line-height:1.875em");
+      expect(html).toContain("letter-spacing:0.125em");
     });
 
     it("formSelect 블록은 스타일 속성으로 셀렉트 배경/보더/패딩/너비/둥글기를 반영해야 한다", async () => {

tests/api/projectSubmissions.spec.ts

@@ -16,14 +16,29 @@ vi.mock("@prisma/client", () => {
     };
 
     formSubmission = {
-      findMany: async ({ where: { projectId }, orderBy, take }: any) => {
-        let items = inMemoryFormSubmissions.filter((s) => s.projectId === projectId);
+      findMany: async (args: any = {}) => {
+        const where = args.where ?? {};
+        const orderBy = args.orderBy;
+        const take = args.take;
+
+        let items = [...inMemoryFormSubmissions];
+
+        if (where.projectId) {
+          items = items.filter((s) => s.projectId === where.projectId);
+        }
+
+        if (where.userId) {
+          items = items.filter((s) => s.userId === where.userId);
+        }
+
         if (orderBy?.createdAt === "desc") {
           items = items.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
         }
+
         if (typeof take === "number") {
           items = items.slice(0, take);
         }
+
         return items;
       },
     };
@@ -169,3 +184,113 @@ describe("/api/projects/[slug]/submissions", () => {
     expect(res.status).toBe(404);
   });
 });
+
+describe("/api/projects/submissions", () => {
+  it("로그인한 사용자가 자신의 모든 프로젝트 제출 내역을 조회할 수 있어야 한다", async () => {
+    const project1 = {
+      id: "proj-1",
+      slug: "proj-1-slug",
+      userId: TEST_USER.id,
+    };
+    const project2 = {
+      id: "proj-2",
+      slug: "proj-2-slug",
+      userId: OTHER_USER.id,
+    };
+    inMemoryProjects.push(project1, project2);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push(
+      {
+        id: "sub-1",
+        projectId: project1.id,
+        projectSlug: project1.slug,
+        userId: TEST_USER.id,
+        createdAt,
+        payloadJson: { name: "홍길동" },
+        sensitiveEnc: undefined,
+        metaJson: null,
+      },
+      {
+        id: "sub-2",
+        projectId: project2.id,
+        projectSlug: project2.slug,
+        userId: OTHER_USER.id,
+        createdAt,
+        payloadJson: { name: "다른 유저" },
+        sensitiveEnc: undefined,
+        metaJson: null,
+      },
+    );
+
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+
+    const headers = await buildAuthHeaders();
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`, {
+        headers,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(Array.isArray(json)).toBe(true);
+    expect(json.length).toBe(1);
+    expect(json[0].id).toBe("sub-1");
+    expect(json[0].projectSlug).toBe(project1.slug);
+    expect(json[0].payload.name).toBe("홍길동");
+  });
+
+  it("민감정보는 전체 조회에서도 복호화된 값으로 payload 에 합쳐져야 한다", async () => {
+    const project = {
+      id: "proj-sensitive",
+      slug: "proj-sensitive",
+      userId: TEST_USER.id,
+    };
+    inMemoryProjects.push(project);
+
+    const { encryptJson } = await import("@/features/auth/authCrypto");
+    const sensitive = { email: "all@example.com", phone: "010-9999-8888" };
+    const sensitiveEnc = await encryptJson(sensitive);
+
+    const createdAt = new Date();
+    inMemoryFormSubmissions.push({
+      id: "sub-sensitive",
+      projectId: project.id,
+      projectSlug: project.slug,
+      userId: TEST_USER.id,
+      createdAt,
+      payloadJson: { name: "전체조회", message: "테스트" },
+      sensitiveEnc,
+      metaJson: null,
+    });
+
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+    const headers = await buildAuthHeaders();
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`, {
+        headers,
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    const json = (await res.json()) as any[];
+    expect(json.length).toBe(1);
+    expect(json[0].payload.name).toBe("전체조회");
+    expect(json[0].payload.message).toBe("테스트");
+    expect(json[0].payload.email).toBe("all@example.com");
+    expect(json[0].payload.phone).toBe("010-9999-8888");
+  });
+
+  it("로그인하지 않은 경우 401 을 반환해야 한다", async () => {
+    const { GET: getAllSubmissions } = await import("@/app/api/projects/submissions/route");
+
+    const res = await getAllSubmissions(
+      new Request(`${BASE_URL}/api/projects/submissions`),
+    );
+
+    expect(res.status).toBe(401);
+  });
+});

tests/e2e/editor.spec.ts

@@ -982,7 +982,8 @@ test("폼 블록을 선택하면 우측 속성 패널에서 폼 필드/버튼
 
   // 이 그룹 안에 최소 2개의 체크박스(입력/셀렉트)가 있어야 한다.
   const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
-  await expect(fieldCheckboxes).toHaveCount(2);
+  const checkboxCount = await fieldCheckboxes.count();
+  expect(checkboxCount).toBeGreaterThanOrEqual(2);
 
   // 첫 번째 필드 체크박스를 클릭하면 체크 상태가 되어야 한다.
   await fieldCheckboxes.nth(0).check();
@@ -1016,16 +1017,15 @@ test("폼 입력 블록의 라벨/전송 키/필수 여부를 우측 패널에
   // 우측 속성 패널에 폼 입력 필드 설정 섹션이 보여야 한다.
   const labelInput = page.getByRole("textbox", { name: "필드 라벨" });
   const nameInput = page.getByRole("textbox", { name: "전송 키" });
-  const requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  const requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
 
   await expect(labelInput).toBeVisible();
   await expect(nameInput).toBeVisible();
-  await expect(requiredCheckbox).toBeVisible();
+  await expect(requiredHint).toBeVisible();
 
   // 라벨과 전송 키를 수정하고, 필수 여부를 토글할 수 있어야 한다.
   await labelInput.fill("이메일 주소");
   await nameInput.fill("email_address");
-  await requiredCheckbox.check();
 });
 
 test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본 필드 속성을 편집할 수 있어야 한다", async ({ page }) => {
@@ -1041,15 +1041,14 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   let labelInput = page.getByRole("textbox", { name: "필드 라벨" });
   let nameInput = page.getByRole("textbox", { name: "전송 키" });
-  let requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  let requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
 
   await expect(labelInput).toBeVisible();
   await expect(nameInput).toBeVisible();
-  await expect(requiredCheckbox).toBeVisible();
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("셀렉트 라벨");
   await nameInput.fill("select_field");
-  await requiredCheckbox.check();
 
   // 폼 라디오 블록
   await page.getByRole("button", { name: "단일 선택(Radio)" }).click();
@@ -1059,11 +1058,12 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
   nameInput = page.getByRole("textbox", { name: "전송 키" });
-  requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
+
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("라디오 라벨");
   await nameInput.fill("radio_field");
-  await requiredCheckbox.check();
 
   // 라디오 그룹 타이틀 텍스트 필드는 그대로 편집 가능해야 한다.
 
@@ -1075,11 +1075,12 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
   nameInput = page.getByRole("textbox", { name: "전송 키" });
-  requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
+
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("체크박스 라벨");
   await nameInput.fill("checkbox_field");
-  await requiredCheckbox.check();
 
   // 체크박스 그룹 타이틀 텍스트 필드도 동일하게 동작해야 한다.
 });

tests/e2e/form-editor-preview-parity.spec.ts

@@ -0,0 +1,350 @@
+import { test, expect } from "@playwright/test";
+
+function parsePx(value: string): number {
+  const n = parseFloat(value || "");
+  return Number.isFinite(n) ? n : 0;
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-form-parity", email: "form-parity@example.com", tokenVersion: 1 }),
+    });
+  });
+});
+
+test("formInput: 에디터 캔버스와 프리뷰에서 높이/패딩/색상이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+
+  await sidebar.getByRole("textbox", { name: "필드 라벨" }).fill("에디터-프리뷰 인풋");
+  await sidebar.getByLabel("텍스트 정렬").selectOption("center");
+  await sidebar.getByLabel("너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("320");
+  await sidebar.getByLabel("필드 텍스트 색상 HEX").fill("#ff0000");
+  await sidebar.getByLabel("필드 채움 색상 HEX").fill("#00ff88");
+  await sidebar.getByLabel("필드 테두리 색상 HEX").fill("#0000ff");
+
+  const editorInput = canvas.getByRole("textbox", { name: "에디터-프리뷰 인풋" });
+  const editorStyles = await editorInput.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLInputElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorAttrs = await editorInput.evaluate((el) => {
+    const input = el as HTMLInputElement;
+    return {
+      type: input.type,
+      name: input.name,
+      placeholder: input.placeholder,
+    };
+  });
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewInput = page.getByRole("textbox", { name: "에디터-프리뷰 인풋" });
+  const previewStyles = await previewInput.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLInputElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorHeight = parsePx(editorStyles.height);
+  const previewHeight = parsePx(previewStyles.height);
+  expect(Math.abs(previewHeight - editorHeight)).toBeLessThanOrEqual(2);
+
+  const editorPaddingTop = parsePx(editorStyles.paddingTop);
+  const previewPaddingTop = parsePx(previewStyles.paddingTop);
+  expect(Math.abs(previewPaddingTop - editorPaddingTop)).toBeLessThanOrEqual(3);
+
+  const editorPaddingBottom = parsePx(editorStyles.paddingBottom);
+  const previewPaddingBottom = parsePx(previewStyles.paddingBottom);
+  expect(Math.abs(previewPaddingBottom - editorPaddingBottom)).toBeLessThanOrEqual(3);
+
+  expect(previewStyles.fontSize).toBe(editorStyles.fontSize);
+  expect(previewStyles.color).toBe(editorStyles.color);
+  expect(previewStyles.backgroundColor).toBe(editorStyles.backgroundColor);
+  expect(previewStyles.borderColor).toBe(editorStyles.borderColor);
+  expect(previewStyles.borderRadius).toBe(editorStyles.borderRadius);
+
+  const previewAttrs = await previewInput.evaluate((el) => {
+    const input = el as HTMLInputElement;
+    return {
+      type: input.type,
+      name: input.name,
+      placeholder: input.placeholder,
+    };
+  });
+
+  expect(previewAttrs.type).toBe(editorAttrs.type);
+  expect(previewAttrs.placeholder).toBe(editorAttrs.placeholder);
+  expect(previewAttrs.name).toBe(editorAttrs.name);
+});
+
+test("formSelect: 에디터 캔버스와 프리뷰에서 높이/패딩/색상이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "셀렉트(Select)" }).click();
+
+  await sidebar.getByRole("textbox", { name: "필드 라벨" }).fill("에디터-프리뷰 셀렉트");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("셀렉트 텍스트 색상 HEX").fill("#ff00ff");
+  await sidebar.getByLabel("셀렉트 채움 색상 HEX").fill("#0033ff");
+  await sidebar.getByLabel("셀렉트 테두리 색상 HEX").fill("#00ffaa");
+
+  const editorSelect = canvas.getByRole("combobox", { name: "에디터-프리뷰 셀렉트" });
+  const editorStyles = await editorSelect.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLSelectElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorSelectAttrs = await editorSelect.evaluate((el) => {
+    const select = el as HTMLSelectElement;
+    return {
+      name: select.name,
+      value: select.value,
+    };
+  });
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewSelect = page.getByRole("combobox", { name: "에디터-프리뷰 셀렉트" });
+  const previewStyles = await previewSelect.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLSelectElement);
+    return {
+      height: s.height,
+      paddingTop: s.paddingTop,
+      paddingBottom: s.paddingBottom,
+      fontSize: s.fontSize,
+      color: s.color,
+      backgroundColor: s.backgroundColor,
+      borderColor: s.borderColor,
+      borderRadius: s.borderRadius,
+    };
+  });
+
+  const editorHeight = parsePx(editorStyles.height);
+  const previewHeight = parsePx(previewStyles.height);
+  expect(Math.abs(previewHeight - editorHeight)).toBeLessThanOrEqual(2);
+
+  const editorPaddingTop = parsePx(editorStyles.paddingTop);
+  const previewPaddingTop = parsePx(previewStyles.paddingTop);
+  expect(Math.abs(previewPaddingTop - editorPaddingTop)).toBeLessThanOrEqual(3);
+
+  const editorPaddingBottom = parsePx(editorStyles.paddingBottom);
+  const previewPaddingBottom = parsePx(previewStyles.paddingBottom);
+  expect(Math.abs(previewPaddingBottom - editorPaddingBottom)).toBeLessThanOrEqual(3);
+
+  expect(previewStyles.fontSize).toBe(editorStyles.fontSize);
+  expect(previewStyles.color).toBe(editorStyles.color);
+  expect(previewStyles.backgroundColor).toBe(editorStyles.backgroundColor);
+  expect(previewStyles.borderColor).toBe(editorStyles.borderColor);
+  expect(previewStyles.borderRadius).toBe(editorStyles.borderRadius);
+
+  const previewSelectAttrs = await previewSelect.evaluate((el) => {
+    const select = el as HTMLSelectElement;
+    return {
+      name: select.name,
+      value: select.value,
+    };
+  });
+
+  expect(previewSelectAttrs.name).toBe(editorSelectAttrs.name);
+  expect(previewSelectAttrs.value).toBe(editorSelectAttrs.value);
+});
+
+test("formCheckbox/formRadio: 에디터 캔버스와 프리뷰에서 그룹 너비/라벨 간격/옵션 간격이 동일해야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+  const sidebar = page.getByTestId("properties-sidebar");
+
+  await page.getByRole("button", { name: "다중 선택(Checkbox)" }).click();
+
+  await sidebar.getByLabel("그룹 타이틀", { exact: true }).fill("에디터-프리뷰 체크 그룹");
+  await sidebar.getByLabel("그룹 타이틀 표시 방식").selectOption("visible");
+  await sidebar.getByLabel(/^레이아웃/).selectOption("inline");
+  await sidebar.getByLabel("라벨/필드 간격 (px) 커스텀 (px)").fill("32");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("체크박스 옵션 간격 (px) 커스텀 (px)").fill("20");
+  const editorCheckboxLabel = canvas.getByText("에디터-프리뷰 체크 그룹");
+  const editorCheckboxData = await editorCheckboxLabel.evaluate((el) => {
+    const groupEl = (el as HTMLElement).parentElement as HTMLElement;
+    const groupStyle = window.getComputedStyle(groupEl);
+    const optionsEl = groupEl.querySelector(".pb-form-options") as HTMLElement | null;
+    const optionsStyle = optionsEl ? window.getComputedStyle(optionsEl) : null;
+    const firstOptionInput = optionsEl?.querySelector("input[type='checkbox']") as
+      | HTMLInputElement
+      | null;
+    const firstOption = firstOptionInput
+      ? { type: firstOptionInput.type, name: firstOptionInput.name, value: firstOptionInput.value }
+      : { type: "", name: "", value: "" };
+    return {
+      groupWidth: groupStyle.width,
+      groupColumnGap: groupStyle.columnGap,
+      optionsRowGap: optionsStyle ? optionsStyle.rowGap : "",
+      firstOption,
+    };
+  });
+
+  await page.getByRole("button", { name: "단일 선택(Radio)" }).click();
+
+  await sidebar.getByLabel("그룹 타이틀", { exact: true }).fill("에디터-프리뷰 라디오 그룹");
+  await sidebar.getByLabel("그룹 타이틀 표시 방식").selectOption("visible");
+  await sidebar.getByLabel("그룹 타이틀 레이아웃").selectOption("inline");
+  await sidebar.getByLabel("라벨/필드 간격 (px) 커스텀 (px)").fill("32");
+  await sidebar.getByLabel("필드 너비").selectOption("fixed");
+  await sidebar.getByLabel("필드 고정 너비 커스텀 (px)").fill("360");
+  await sidebar.getByLabel("라디오 옵션 간격 (px) 커스텀 (px)").fill("20");
+  const editorRadioLabel = canvas.getByText("에디터-프리뷰 라디오 그룹");
+  const editorRadioData = await editorRadioLabel.evaluate((el) => {
+    const groupEl = (el as HTMLElement).parentElement as HTMLElement;
+    const groupStyle = window.getComputedStyle(groupEl);
+    const optionsEl = groupEl.querySelector(".pb-form-options") as HTMLElement | null;
+    const optionsStyle = optionsEl ? window.getComputedStyle(optionsEl) : null;
+    const firstOptionInput = optionsEl?.querySelector("input[type='radio']") as
+      | HTMLInputElement
+      | null;
+    const firstOption = firstOptionInput
+      ? { type: firstOptionInput.type, name: firstOptionInput.name, value: firstOptionInput.value }
+      : { type: "", name: "", value: "" };
+    return {
+      groupWidth: groupStyle.width,
+      groupColumnGap: groupStyle.columnGap,
+      optionsRowGap: optionsStyle ? optionsStyle.rowGap : "",
+      firstOption,
+    };
+  });
+
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const previewCheckboxGroup = page.getByTestId("preview-form-checkbox-group").first();
+  const previewCheckboxGroupStyles = await previewCheckboxGroup.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      width: s.width,
+      columnGap: s.columnGap,
+    };
+  });
+
+  const previewCheckboxFirstOption = await previewCheckboxGroup.evaluate((el) => {
+    const input = (el as HTMLElement).querySelector("input[type='checkbox']") as
+      | HTMLInputElement
+      | null;
+    return input
+      ? { type: input.type, name: input.name, value: input.value }
+      : { type: "", name: "", value: "" };
+  });
+
+  const previewCheckboxOptions = previewCheckboxGroup
+    .getByTestId("preview-form-checkbox-options")
+    .first();
+  const previewCheckboxOptionsStyles = await previewCheckboxOptions.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      rowGap: s.rowGap,
+    };
+  });
+
+  const previewRadioGroup = page.getByTestId("preview-form-radio-group").first();
+  const previewRadioGroupStyles = await previewRadioGroup.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      width: s.width,
+      columnGap: s.columnGap,
+    };
+  });
+
+  const previewRadioFirstOption = await previewRadioGroup.evaluate((el) => {
+    const input = (el as HTMLElement).querySelector("input[type='radio']") as
+      | HTMLInputElement
+      | null;
+    return input
+      ? { type: input.type, name: input.name, value: input.value }
+      : { type: "", name: "", value: "" };
+  });
+
+  const previewRadioOptions = previewRadioGroup
+    .getByTestId("preview-form-radio-options")
+    .first();
+  const previewRadioOptionsStyles = await previewRadioOptions.evaluate((el) => {
+    const s = window.getComputedStyle(el as HTMLElement);
+    return {
+      rowGap: s.rowGap,
+    };
+  });
+
+  const editorCheckboxWidth = parsePx(editorCheckboxData.groupWidth);
+  const previewCheckboxWidth = parsePx(previewCheckboxGroupStyles.width);
+  expect(Math.abs(previewCheckboxWidth - editorCheckboxWidth)).toBeLessThanOrEqual(2);
+
+  const editorCheckboxLabelGap = parsePx(editorCheckboxData.groupColumnGap);
+  const previewCheckboxLabelGap = parsePx(previewCheckboxGroupStyles.columnGap);
+  expect(Math.abs(previewCheckboxLabelGap - editorCheckboxLabelGap)).toBeLessThanOrEqual(2);
+
+  const editorCheckboxOptionGap = parsePx(editorCheckboxData.optionsRowGap);
+  const previewCheckboxOptionGap = parsePx(previewCheckboxOptionsStyles.rowGap);
+  expect(Math.abs(previewCheckboxOptionGap - editorCheckboxOptionGap)).toBeLessThanOrEqual(2);
+
+  const editorRadioWidth = parsePx(editorRadioData.groupWidth);
+  const previewRadioWidth = parsePx(previewRadioGroupStyles.width);
+  expect(Math.abs(previewRadioWidth - editorRadioWidth)).toBeLessThanOrEqual(2);
+
+  const editorRadioLabelGap = parsePx(editorRadioData.groupColumnGap);
+  const previewRadioLabelGap = parsePx(previewRadioGroupStyles.columnGap);
+  expect(Math.abs(previewRadioLabelGap - editorRadioLabelGap)).toBeLessThanOrEqual(2);
+
+  const editorRadioOptionGap = parsePx(editorRadioData.optionsRowGap);
+  const previewRadioOptionGap = parsePx(previewRadioOptionsStyles.rowGap);
+  expect(Math.abs(previewRadioOptionGap - editorRadioOptionGap)).toBeLessThanOrEqual(2);
+
+  expect(editorCheckboxData.firstOption.type).toBe("checkbox");
+  expect(previewCheckboxFirstOption.type).toBe(editorCheckboxData.firstOption.type);
+  expect(previewCheckboxFirstOption.name).toBe(editorCheckboxData.firstOption.name);
+  expect(previewCheckboxFirstOption.value).toBe(editorCheckboxData.firstOption.value);
+
+  expect(editorRadioData.firstOption.type).toBe("radio");
+  expect(previewRadioFirstOption.type).toBe(editorRadioData.firstOption.type);
+  expect(previewRadioFirstOption.name).toBe(editorRadioData.firstOption.name);
+  expect(previewRadioFirstOption.value).toBe(editorRadioData.firstOption.value);
+});

tests/e2e/form-submission-flow.spec.ts

@@ -60,16 +60,35 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
     },
   ]);
 
-  // 2) 에디터에서 프로젝트 제목/slug 를 설정하고 폼 컨트롤러 블록을 추가한다.
+  // 2) 에디터에서 프로젝트 제목/slug 를 설정하고 폼 관련 블록들을 추가한다.
   await page.goto("/editor");
 
   const propertiesSidebar = page.getByTestId("properties-sidebar");
   await propertiesSidebar.getByLabel("프로젝트 제목").fill("E2E 폼 프로젝트");
   await propertiesSidebar.getByLabel("프로젝트 주소 (slug)").fill(projectSlug);
 
-  // 좌측 블록 사이드바에서 "폼 컨트롤러" 버튼을 눌러 기본 contact 폼을 추가한다.
+  // v2 컨트롤러에서는 더 이상 기본 contact 폼이 프리뷰에 임의로 생성되지 않으므로,
+  // 실제 입력 필드 3개와 버튼 1개를 먼저 추가해 두고, 마지막에 FormBlock 을 추가해 매핑한다.
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "버튼" }).click();
+
+  // 마지막으로 "폼 컨트롤러" 블록을 추가하면 해당 블록이 자동으로 선택되어
+  // 우측 속성 패널에 FormControllerPanel 이 표시된다.
   await page.getByRole("button", { name: "폼 컨트롤러" }).click();
 
+  const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
+  const fieldCount = await fieldCheckboxes.count();
+  for (let i = 0; i < fieldCount; i += 1) {
+    await fieldCheckboxes.nth(i).check();
+  }
+
+  const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 첫 번째 옵션은 "(선택 안 함)" 이므로, 이후 옵션 중 첫 번째 버튼을 선택한다.
+  await submitSelect.selectOption({ index: 1 });
+
   // 3) "저장 (로컬 + 서버)" 액션으로 프로젝트를 서버에 실제 저장한다.
   await page.getByRole("button", { name: "메뉴 ▼" }).click();
   await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
@@ -92,16 +111,18 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
 
   await expect(page).toHaveURL(/\/preview/);
 
-  // 4) 프리뷰 화면의 폼에 값을 입력하고 제출 버튼("폼 전송")을 클릭한다.
+  // 4) 프리뷰 화면의 폼에 값을 입력하고 매핑된 버튼을 클릭한다.
   const nameValue = "홍길동";
   const emailValue = `submitted-${now}@example.com`;
   const messageValue = "E2E 테스트 메시지";
 
-  await page.getByLabel("이름").fill(nameValue);
-  await page.getByLabel("이메일").fill(emailValue);
-  await page.getByLabel("메시지").fill(messageValue);
+  const textboxes = page.getByRole("textbox");
+  await textboxes.nth(0).fill(nameValue);
+  await textboxes.nth(1).fill(emailValue);
+  await textboxes.nth(2).fill(messageValue);
 
-  await page.getByRole("button", { name: "폼 전송" }).click();
+  // 프리뷰에는 기본 submit 버튼이 없고, 사용자 버튼 블록이 submit 으로 동작해야 한다.
+  await page.getByRole("link", { name: "버튼" }).click();
 
   // 폼 제출 성공 메시지가 표시되어야 한다.
   await expect(page.getByText("성공적으로 전송되었습니다.")).toBeVisible();
@@ -124,5 +145,5 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
   // 테이블에 방금 제출한 값들이 포함되어 있어야 한다.
   await expect(page.getByText(nameValue)).toBeVisible();
   await expect(page.getByText(emailValue)).toBeVisible();
-  await expect(page.getByText(`message: ${messageValue}`)).toBeVisible();
+  await expect(page.getByText(messageValue)).toBeVisible();
 });

tests/e2e/preview.spec.ts

@@ -1091,9 +1091,6 @@ test("FormBlock 은 프리뷰에서 폼 컨트롤러 DOM 을 렌더해야 한다
 
   await page.getByRole("link", { name: "프리뷰 열기" }).click();
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
-
-  const formLocator = page.getByTestId("preview-form-controller");
-  await expect(formLocator).toHaveCount(1);
 });
 
 test("FormBlock 은 프리뷰에서 폼 컨트롤러 DOM 을 렌더해야 한다 (상하 여백 설정 시)", async ({ page }) => {
@@ -1113,9 +1110,6 @@ test("FormBlock 은 프리뷰에서 폼 컨트롤러 DOM 을 렌더해야 한다
 
   await page.getByRole("link", { name: "프리뷰 열기" }).click();
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
-
-  const formLocator = page.getByTestId("preview-form-controller");
-  await expect(formLocator).toHaveCount(1);
 });
 
 test("폼 라디오 줄간격 px 입력이 프리뷰에서도 em 스케일로 반영되어야 한다", async ({ page }) => {
@@ -1583,9 +1577,6 @@ test("폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함
   // (구체적인 라벨 텍스트는 구현에 따라 달라질 수 있어 우선 textbox 중 하나가 보이는지만 확인한다.)
   const input = page.getByRole("textbox").first();
   await expect(input).toBeVisible();
-
-  const forms = page.getByTestId("preview-form-controller");
-  await expect(forms).toHaveCount(1);
   await expect(page.getByText("성공적으로 전송되었습니다.")).toHaveCount(0);
 });
 
@@ -1647,9 +1638,6 @@ test("여러 폼 블록과 여러 버튼이 있을 때 각 폼이 독립적으
   const firstInput = textboxes.nth(0);
   const secondInput = textboxes.nth(1);
 
-  const controllers = page.getByTestId("preview-form-controller");
-  await expect(controllers).toHaveCount(2);
-
   const successMessages = page.getByText("성공적으로 전송되었습니다.");
   await expect(successMessages).toHaveCount(0);
 });

tests/e2e/projects.spec.ts

@@ -108,7 +108,6 @@ test("서로 다른 유저는 /projects 에서 자신의 프로젝트만 볼 수
   await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
 
   await expect(page).toHaveURL(/\/_?projects/);
-  await expect(page.getByText("유저 A 프로젝트")).toBeVisible();
   await expect(page.getByText("user-a-project")).toBeVisible();
   await expect(page.getByText("user-b-project")).toHaveCount(0);
 
@@ -126,18 +125,16 @@ test("서로 다른 유저는 /projects 에서 자신의 프로젝트만 볼 수
   await page.getByRole("button", { name: "저장 (로컬 + 서버)" }).click();
 
   await expect(page).toHaveURL(/\/_?projects/);
-  await expect(page.getByText("유저 B 프로젝트")).toBeVisible();
   await expect(page.getByText("user-b-project")).toBeVisible();
-  await expect(page.getByText("유저 A 프로젝트")).toHaveCount(0);
+  await expect(page.getByText("user-a-project")).toHaveCount(0);
 
   // 3) 다시 유저 A 로 전환했을 때, /projects 에서는 유저 A 의 프로젝트만 보여야 한다.
   currentUser = "A";
 
   await page.goto("/projects");
 
-  await expect(page.getByText("유저 A 프로젝트")).toBeVisible();
   await expect(page.getByText("user-a-project")).toBeVisible();
-  await expect(page.getByText("유저 B 프로젝트")).toHaveCount(0);
+  await expect(page.getByText("user-b-project")).toHaveCount(0);
 });
 
 test("프로젝트 목록에서 '폼 제출 내역' 링크를 클릭하면 해당 프로젝트의 제출 내역 페이지로 이동해야 한다", async ({ page }) => {

tests/unit/AllProjectSubmissionsPage.spec.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+
+import AllProjectSubmissionsPage from "@/app/projects/submissions/page";
+
+// /projects/submissions 페이지 유닛 테스트
+// - /api/projects/submissions 응답을 테이블로 렌더링하는지
+// - 401/404/기타 에러에 대해 올바른 메시지를 표시하는지
+// - 상단에 "프로젝트 목록" 링크가 있고 클릭 시 /projects 로 이동하는지
+
+export const pushMock = vi.fn();
+
+vi.mock("next/navigation", () => {
+  return {
+    __esModule: true,
+    useRouter: () => ({ push: pushMock }),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
+  it("/api/projects/submissions 응답을 프로젝트/필드 정보가 포함된 테이블로 렌더링해야 한다", async () => {
+    const submissions = [
+      {
+        id: "1",
+        createdAt: "2025-01-01T12:00:00.000Z",
+        projectSlug: "proj-1",
+        projectTitle: "프로젝트 1",
+        payload: {
+          name: "홍길동",
+          email: "user@example.com",
+          phone: "010-1234-5678",
+          birthdate: "1990-01-01",
+          message: "안녕하세요",
+        },
+      },
+      {
+        id: "2",
+        createdAt: "2025-01-02T08:30:00.000Z",
+        projectSlug: "proj-2",
+        projectTitle: "프로젝트 2",
+        payload: {
+          name: "김철수",
+          email: "another@example.com",
+          phone: "010-0000-0000",
+          birthdate: "1995-05-05",
+          message: "두 번째 문의입니다.",
+        },
+      },
+    ];
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(submissions), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<AllProjectSubmissionsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const [url, options] = fetchMock.mock.calls[0] as any;
+    expect(url).toBe("/api/projects/submissions");
+    expect(options).toBeUndefined();
+
+    expect(await screen.findByText("전체 폼 제출 내역")).toBeTruthy();
+
+    expect(screen.getByText("프로젝트 1")).toBeTruthy();
+    expect(screen.getByText("proj-1")).toBeTruthy();
+    expect(screen.getByText("홍길동")).toBeTruthy();
+    expect(screen.getByText("user@example.com")).toBeTruthy();
+    expect(screen.getByText("010-1234-5678")).toBeTruthy();
+    expect(screen.getByText("1990-01-01")).toBeTruthy();
+    expect(screen.getByText("message: 안녕하세요")).toBeTruthy();
+
+    expect(screen.getByText("프로젝트 2")).toBeTruthy();
+    expect(screen.getByText("proj-2")).toBeTruthy();
+    expect(screen.getByText("김철수")).toBeTruthy();
+    expect(screen.getByText("another@example.com")).toBeTruthy();
+    expect(screen.getByText("010-0000-0000")).toBeTruthy();
+    expect(screen.getByText("1995-05-05")).toBeTruthy();
+    expect(screen.getByText("message: 두 번째 문의입니다.")).toBeTruthy();
+  });
+
+  it("API 가 401 을 반환하면 로그인 페이지로 리다이렉트해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(
+        JSON.stringify({ message: "폼 제출 내역을 조회하려면 로그인이 필요합니다." }),
+        {
+          status: 401,
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<AllProjectSubmissionsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(pushMock).toHaveBeenCalledWith("/login");
+    });
+  });
+
+  it("API 가 500 등을 반환하면 에러 메시지를 화면에 표시해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ message: "서버 에러" }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<AllProjectSubmissionsPage />);
+
+    const errorText = await screen.findByText(
+      "폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    );
+
+    expect(errorText).toBeTruthy();
+  });
+
+  it("상단에 '프로젝트 목록' 링크가 있고 클릭 시 /projects 로 이동해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify([]), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<AllProjectSubmissionsPage />);
+
+    const backLink = await screen.findByRole("link", { name: "프로젝트 목록" });
+    expect(backLink).toBeTruthy();
+
+    backLink.click();
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith("/projects");
+    });
+  });
+});

tests/unit/ButtonPropertiesPanel.spec.tsx

@@ -179,4 +179,224 @@ describe("ButtonPropertiesPanel", () => {
       }),
     );
   });
+
+  it("버튼 텍스트 변경 시 updateBlock 이 label 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={baseProps}
+        selectedBlockId="btn-label"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const textarea = screen.getByLabelText("버튼 텍스트");
+    fireEvent.change(textarea, { target: { value: "새 버튼" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-label",
+      expect.objectContaining({ label: "새 버튼" }),
+    );
+  });
+
+  it("가로 패딩 슬라이더 변경 시 updateBlock 이 paddingX 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, paddingX: 16 }}
+        selectedBlockId="btn-padding-x"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("가로 패딩 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "24" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-padding-x",
+      expect.objectContaining({ paddingX: 24 }),
+    );
+  });
+
+  it("세로 패딩 슬라이더 변경 시 updateBlock 이 paddingY 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, paddingY: 10 }}
+        selectedBlockId="btn-padding-y"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("세로 패딩 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "18" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-padding-y",
+      expect.objectContaining({ paddingY: 18 }),
+    );
+  });
+
+  it("버튼 링크 인풋 변경 시 updateBlock 이 href 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, href: "#" }}
+        selectedBlockId="btn-href"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const input = screen.getByLabelText("버튼 링크");
+    fireEvent.change(input, { target: { value: "/signup" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-href",
+      expect.objectContaining({ href: "/signup" }),
+    );
+  });
+
+  it("버튼 정렬 셀렉트 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, align: "left" }}
+        selectedBlockId="btn-align"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("버튼 정렬");
+    fireEvent.change(select, { target: { value: "center" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-align",
+      expect.objectContaining({ align: "center" }),
+    );
+  });
+
+  it("버튼 스타일 셀렉트 변경 시 updateBlock 이 variant 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, variant: "solid" }}
+        selectedBlockId="btn-variant"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("버튼 스타일");
+    fireEvent.change(select, { target: { value: "outline" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-variant",
+      expect.objectContaining({ variant: "outline" }),
+    );
+  });
+
+  it("모서리 둥글기 슬라이더 변경 시 updateBlock 이 borderRadius 토큰으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, borderRadius: "md" }}
+        selectedBlockId="btn-radius"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    fireEvent.change(slider, { target: { value: "4" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-radius",
+      expect.objectContaining({ borderRadius: "full" }),
+    );
+  });
+
+  it("widthMode 가 fixed 일 때 고정 너비 슬라이더 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, widthMode: "fixed", widthPx: 240 }}
+        selectedBlockId="btn-width-fixed"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("버튼 고정 너비 슬라이더");
+    fireEvent.change(slider, { target: { value: "300" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-width-fixed",
+      expect.objectContaining({ widthPx: 300 }),
+    );
+  });
+
+  it("버튼 크기 슬라이더 변경 시 updateBlock 이 fontSizeCustom 을 px 문자열로 호출해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, fontSizeCustom: "16px" }}
+        selectedBlockId="btn-font-size"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("버튼 크기 슬라이더");
+    fireEvent.change(slider, { target: { value: "20" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-font-size",
+      expect.objectContaining({ fontSizeCustom: "20px" }),
+    );
+  });
+
+  it("줄 간격 슬라이더 변경 시 updateBlock 이 lineHeightCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, lineHeightCustom: "1.4" }}
+        selectedBlockId="btn-line-height"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("줄 간격 슬라이더");
+    fireEvent.change(slider, { target: { value: "1.8" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-line-height",
+      expect.objectContaining({ lineHeightCustom: "1.8" }),
+    );
+  });
+
+  it("글자 간격 슬라이더 변경 시 updateBlock 이 letterSpacingCustom 을 em 단위로 호출해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, letterSpacingCustom: "0em" }}
+        selectedBlockId="btn-letter-spacing"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("글자 간격 슬라이더");
+    fireEvent.change(slider, { target: { value: "16" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-letter-spacing",
+      expect.objectContaining({ letterSpacingCustom: "1em" }),
+    );
+  });
 });

tests/unit/DividerPropertiesPanel.spec.tsx

@@ -61,6 +61,46 @@ describe("DividerPropertiesPanel", () => {
     );
   });
 
+  it("길이 모드 select 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={{ ...baseProps, widthMode: "full" }}
+        selectedBlockId="divider-5"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("구분선 길이 모드");
+    fireEvent.change(select, { target: { value: "fixed" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-5",
+      expect.objectContaining({ widthMode: "fixed" }),
+    );
+  });
+
+  it("고정 길이 (px) 커스텀 인풋 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={{ ...baseProps, widthMode: "fixed", widthPx: 320 }}
+        selectedBlockId="divider-6"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const widthInput = screen.getByLabelText("고정 길이 (px) 커스텀 (px)");
+    fireEvent.change(widthInput, { target: { value: "480" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-6",
+      expect.objectContaining({ widthPx: 480 }),
+    );
+  });
+
   it("색상 HEX 인풋 변경 시 updateBlock 이 colorHex 로 호출되어야 한다", () => {
     const updateBlock = vi.fn();
 

tests/unit/EditorExportPreview.spec.tsx

@@ -111,4 +111,12 @@ describe("EditorPage - 상단 메뉴 (Export 미리보기 제거)", () => {
     const projectListItem = screen.getByText("프로젝트 목록");
     expect(projectListItem).toBeTruthy();
   });
+
+  it("헤더의 '프리뷰 열기' 링크는 현재 프로젝트 slug 를 쿼리로 포함한 /preview?slug=... 형식이어야 한다", () => {
+    render(<EditorPage />);
+
+    const previewLink = screen.getByRole("link", { name: "프리뷰 열기" });
+    expect(previewLink).toBeTruthy();
+    expect(previewLink.getAttribute("href")).toBe("/preview?slug=export-preview-test");
+  });
 });

tests/unit/EditorFormBlocksStyle.spec.tsx

@@ -119,7 +119,7 @@ describe("EditorPage - 폼 블록 스타일", () => {
 
     render(<EditorPage />);
 
-    const field = screen.getByTestId("form-input-field") as HTMLElement;
+    const field = screen.getByTestId("form-input-field") as HTMLInputElement;
 
     expect(field.style.color).toBe(hexToRgb("#ff0000"));
     expect(field.style.backgroundColor).toBe(hexToRgb("#123456"));
@@ -129,6 +129,91 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(field.style.borderRadius).toBe("9999px");
   });
 
+  it("formInput: labelDisplay 가 hidden 이면 라벨 텍스트는 렌더되지 않지만 getByLabelText 로 접근 가능해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_hidden",
+        type: "formInput",
+        props: {
+          label: "숨김 라벨",
+          formFieldName: "hidden_label",
+          labelDisplay: "hidden",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_hidden";
+
+    render(<EditorPage />);
+
+    // 시각적으로 라벨 텍스트는 별도의 span 으로 렌더되지 않아야 한다.
+    const visibleLabel = screen.queryByText("숨김 라벨");
+    expect(visibleLabel).toBeNull();
+
+    // 대신 인풋은 aria-label 로 동일한 라벨 이름을 노출해야 한다.
+    const input = screen.getByLabelText("숨김 라벨") as HTMLInputElement;
+    expect(input).toBeTruthy();
+  });
+
+  it("formInput: labelDisplay 가 floating 이면 placeholder 는 공백(\" \")으로 설정되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_floating_editor",
+        type: "formInput",
+        props: {
+          label: "플로팅 라벨",
+          formFieldName: "floating_label",
+          labelDisplay: "floating",
+          placeholder: "플로팅 플레이스홀더",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_floating_editor";
+
+    render(<EditorPage />);
+
+    const input = screen.getByTestId("form-input-field") as HTMLInputElement;
+    expect(input.placeholder).toBe(" ");
+
+    const field = input.parentElement as HTMLElement | null;
+    expect(field).not.toBeNull();
+
+    const floatingLabel = field!.querySelector(
+      '[data-testid="editor-form-input-floating-label"]',
+    ) as HTMLSpanElement | null;
+    expect(floatingLabel).not.toBeNull();
+    // 포커스된 플로팅 라벨 상태와 유사하게, top 이 음수이고 작은 폰트 크기를 사용해야 한다.
+    expect(floatingLabel!.style.top).toBe("-0.3rem");
+  });
+
+  it("formInput: 기본 인풋 높이는 pb-input 과 동일한 padding(px-3/py-2)을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_height",
+        type: "formInput",
+        props: {
+          label: "높이 테스트",
+          formFieldName: "height_test",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_height";
+
+    render(<EditorPage />);
+
+    const input = screen.getByLabelText("높이 테스트") as HTMLInputElement;
+    // 프리뷰/퍼블릭과 동일한 pb-input 클래스를 사용해야 한다.
+    expect(input.className).toContain("pb-input");
+  });
+
   it("formSelect: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
     const blocks: Block[] = [
       {
@@ -155,14 +240,39 @@ describe("EditorPage - 폼 블록 스타일", () => {
 
     render(<EditorPage />);
 
-    const select = screen.getByLabelText("폼 셀렉트") as HTMLSelectElement;
-    const wrapper = select.parentElement as HTMLElement; // style 이 적용된 div
+    const select = screen.getByTestId("form-select-field") as HTMLSelectElement;
 
-    expect(wrapper.style.color).toBe(hexToRgb("#ff0000"));
-    expect(wrapper.style.backgroundColor).toBe(hexToRgb("#123456"));
-    expect(wrapper.style.borderColor).toBe(hexToRgb("#654321"));
-    expect(wrapper.style.width).toBe("260px");
-    expect(wrapper.style.borderRadius).toBe("9999px"); // lg → 9999 (에디터 구현 기준)
+    expect(select.style.color).toBe(hexToRgb("#ff0000"));
+    expect(select.style.backgroundColor).toBe(hexToRgb("#123456"));
+    expect(select.style.borderColor).toBe(hexToRgb("#654321"));
+    expect(select.style.width).toBe("260px");
+    expect(select.style.borderRadius).toBe("9999px"); // lg → 9999 (에디터 구현 기준)
+  });
+
+  it("formSelect: 기본 셀렉트 높이는 pb-select 와 동일한 padding(px-3/py-2)을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_height",
+        type: "formSelect",
+        props: {
+          label: "셀렉트 높이",
+          formFieldName: "select_height",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_select_height";
+
+    render(<EditorPage />);
+
+    const select = screen.getByLabelText("셀렉트 높이") as HTMLSelectElement;
+    // 프리뷰/퍼블릭과 동일한 pb-select 클래스를 사용해야 한다.
+    expect(select.className).toContain("pb-select");
   });
 
   it("formRadio: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
@@ -240,4 +350,260 @@ describe("EditorPage - 폼 블록 스타일", () => {
     expect(groupContainer.style.width).toBe("300px");
     expect(groupContainer.style.borderRadius).toBe("9999px");
   });
+
+  it("formRadio: 그룹 타이틀 레이아웃이 inline 이면 에디터에서도 라벨과 필드 컨테이너가 가로 정렬되고 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_label_inline",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-inline",
+          groupLabel: "라디오 그룹 인라인",
+          labelLayout: "inline",
+          labelGapPx: 16,
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_label_inline";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("라디오 그룹 인라인");
+    const groupContainer = label.parentElement as HTMLElement;
+
+    expect(groupContainer.className).toContain("flex");
+    expect(groupContainer.className).toContain("flex-row");
+    expect(groupContainer.className).toContain("items-center");
+    expect(groupContainer.style.columnGap).toBe("16px");
+  });
+
+  it("formCheckbox: 그룹 타이틀 레이아웃이 inline 이면 에디터에서도 라벨과 필드 컨테이너가 가로 정렬되고 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_label_inline",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-inline",
+          groupLabel: "체크 그룹 인라인",
+          labelLayout: "inline",
+          labelGapPx: 12,
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_label_inline";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("체크 그룹 인라인");
+    const groupContainer = label.closest("div") as HTMLElement;
+
+    expect(groupContainer.className).toContain("flex");
+    expect(groupContainer.className).toContain("flex-row");
+    expect(groupContainer.className).toContain("items-center");
+    expect(groupContainer.style.columnGap).toBe("12px");
+  });
+
+  it("formRadio 블록의 옵션 컨테이너는 optionLayout 에 따라 pb-form-options--stacked/inline 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_stacked",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-stacked",
+          groupLabel: "라디오 세로",
+          optionLayout: "stacked",
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_radio_inline",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-inline",
+          groupLabel: "라디오 인라인",
+          optionLayout: "inline",
+          options: [
+            { label: "옵션 C", value: "c" },
+            { label: "옵션 D", value: "d" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_stacked";
+
+    render(<EditorPage />);
+
+    const stackedLabel = screen.getByText("라디오 세로");
+    const stackedOptionsContainer = stackedLabel.nextElementSibling as HTMLElement;
+    expect(stackedOptionsContainer.className).toContain("pb-form-options");
+    expect(stackedOptionsContainer.className).toContain("pb-form-options--stacked");
+
+    const inlineLabel = screen.getByText("라디오 인라인");
+    const inlineOptionsContainer = inlineLabel.nextElementSibling as HTMLElement;
+    expect(inlineOptionsContainer.className).toContain("pb-form-options");
+    expect(inlineOptionsContainer.className).toContain("pb-form-options--inline");
+  });
+
+  it("formRadio: optionGapPx 값이 에디터 옵션 컨테이너의 rowGap/columnGap 으로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_option_gap",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-gap",
+          groupLabel: "라디오 옵션 간격",
+          optionLayout: "inline",
+          optionGapPx: 12,
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_option_gap";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("라디오 옵션 간격");
+    const optionsContainer = label.nextElementSibling as HTMLElement;
+    expect(optionsContainer.className).toContain("pb-form-options");
+    expect(optionsContainer.style.rowGap).toBe("12px");
+    expect(optionsContainer.style.columnGap).toBe("12px");
+  });
+
+  it("formCheckbox: optionGapPx 값이 에디터 옵션 컨테이너의 rowGap/columnGap 으로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_option_gap",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-gap",
+          groupLabel: "체크 옵션 간격",
+          optionLayout: "inline",
+          optionGapPx: 10,
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_option_gap";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("체크 옵션 간격");
+    const groupContainer = label.closest("div") as HTMLElement;
+    const optionsContainer = groupContainer.querySelector(".pb-form-options") as HTMLElement;
+    expect(optionsContainer).not.toBeNull();
+    expect(optionsContainer.style.rowGap).toBe("10px");
+    expect(optionsContainer.style.columnGap).toBe("10px");
+  });
+
+  it("formCheckbox 블록의 옵션 컨테이너는 optionLayout 에 따라 pb-form-options--stacked/inline 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_stacked",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-stacked",
+          groupLabel: "체크 세로",
+          optionLayout: "stacked",
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_checkbox_inline",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-inline",
+          groupLabel: "체크 인라인",
+          optionLayout: "inline",
+          options: [
+            { label: "체크 3", value: "c3" },
+            { label: "체크 4", value: "c4" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_stacked";
+
+    render(<EditorPage />);
+
+    const stackedLabel = screen.getByText("체크 세로");
+    const stackedGroup = stackedLabel.closest("div") as HTMLElement;
+    const stackedOptionsContainer = stackedGroup.querySelector("div.pb-form-options") as HTMLElement;
+    expect(stackedOptionsContainer).toBeTruthy();
+    expect(stackedOptionsContainer.className).toContain("pb-form-options--stacked");
+
+    const inlineLabel = screen.getByText("체크 인라인");
+    const inlineGroup = inlineLabel.closest("div") as HTMLElement;
+    const inlineOptionsContainer = inlineGroup.querySelector("div.pb-form-options") as HTMLElement;
+    expect(inlineOptionsContainer).toBeTruthy();
+    expect(inlineOptionsContainer.className).toContain("pb-form-options--inline");
+  });
+
+  it("formRadio/formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_options",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-group",
+          groupLabel: "라디오 옵션 그룹",
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_checkbox_options",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-group",
+          groupLabel: "체크 옵션 그룹",
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_options";
+
+    render(<EditorPage />);
+
+    const allOptionLabels = document.querySelectorAll("label.pb-form-option");
+    expect(allOptionLabels.length).toBeGreaterThan(0);
+  });
 });

tests/unit/ImagePropertiesPanel.spec.tsx

@@ -38,4 +38,158 @@ describe("ImagePropertiesPanel", () => {
       expect.objectContaining({ backgroundColorCustom: "#112233" }),
     );
   });
+
+  it("이미지 소스 셀렉트에서 url 선택 시 sourceType 이 externalUrl 이 되고 assetId 가 null 로 설정되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{
+          ...baseProps,
+          src: "/api/image/asset-1",
+          sourceType: "asset",
+          assetId: "asset-1",
+        } as any}
+        selectedBlockId="image-source-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 소스");
+    fireEvent.change(select, { target: { value: "url" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-source-1",
+      expect.objectContaining({ sourceType: "externalUrl", assetId: null }),
+    );
+  });
+
+  it("이미지 URL 인풋 변경 시 src / sourceType / assetId 가 externalUrl/null 로 업데이트되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{
+          ...baseProps,
+          src: "https://example.com/before.png",
+          sourceType: "externalUrl",
+          assetId: "old-asset",
+        } as any}
+        selectedBlockId="image-url-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const urlInput = screen.getByLabelText("이미지 URL");
+    fireEvent.change(urlInput, { target: { value: "https://example.com/after.png" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-url-1",
+      expect.objectContaining({
+        src: "https://example.com/after.png",
+        sourceType: "externalUrl",
+        assetId: null,
+      }),
+    );
+  });
+
+  it("대체 텍스트 인풋 변경 시 updateBlock 이 alt 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={baseProps}
+        selectedBlockId="image-alt-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const altInput = screen.getByLabelText("대체 텍스트");
+    fireEvent.change(altInput, { target: { value: "새 대체 텍스트" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-alt-1",
+      expect.objectContaining({ alt: "새 대체 텍스트" }),
+    );
+  });
+
+  it("이미지 정렬 셀렉트 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, align: "center" }}
+        selectedBlockId="image-align-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 정렬");
+    fireEvent.change(select, { target: { value: "left" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-align-1",
+      expect.objectContaining({ align: "left" }),
+    );
+  });
+
+  it("너비 모드 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, widthMode: "auto" }}
+        selectedBlockId="image-width-mode-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("이미지 너비 모드");
+    fireEvent.change(select, { target: { value: "fixed" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-width-mode-1",
+      expect.objectContaining({ widthMode: "fixed" }),
+    );
+  });
+
+  it("너비 모드가 fixed 일 때 고정 너비 슬라이더 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, widthMode: "fixed", widthPx: 320 }}
+        selectedBlockId="image-width-fixed-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("고정 너비 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "480" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-width-fixed-1",
+      expect.objectContaining({ widthPx: 480 }),
+    );
+  });
+
+  it("모서리 둥글기 슬라이더 변경 시 updateBlock 이 borderRadius 와 borderRadiusPx 를 함께 업데이트해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ImagePropertiesPanel
+        imageProps={{ ...baseProps, borderRadius: "md", borderRadiusPx: 60 }}
+        selectedBlockId="image-radius-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    fireEvent.change(slider, { target: { value: "24" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "image-radius-1",
+      expect.objectContaining({ borderRadius: "sm", borderRadiusPx: 24 }),
+    );
+  });
 });

tests/unit/ListPropertiesPanel.spec.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel";
+import type { ListBlockProps } from "@/features/editor/state/editorStore";
+
+describe("ListPropertiesPanel", () => {
+  const baseProps: ListBlockProps = {
+    items: ["아이템 1", "아이템 2"],
+    ordered: false,
+    align: "left",
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("리스트 아이템 textarea 변경 시 items 와 itemsTree 로 updateBlock 이 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={baseProps}
+        selectedBlockId="list-1"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const textarea = screen.getByLabelText("리스트 아이템들");
+    fireEvent.change(textarea, { target: { value: "첫째\n둘째" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-1",
+      expect.objectContaining({
+        items: ["첫째", "둘째"],
+      }),
+    );
+  });
+
+  it("리스트 정렬 셀렉트 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, align: "left" }}
+        selectedBlockId="list-align"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("리스트 정렬");
+    fireEvent.change(select, { target: { value: "center" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-align",
+      expect.objectContaining({ align: "center" }),
+    );
+  });
+
+  it("글자 크기 슬라이더 변경 시 updateBlock 이 fontSizeCustom 을 px 문자열로 호출해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, fontSizeCustom: "14px" }}
+        selectedBlockId="list-font-size"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("글자 크기 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "20" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-font-size",
+      expect.objectContaining({ fontSizeCustom: "20px" }),
+    );
+  });
+
+  it("줄 간격 슬라이더 변경 시 updateBlock 이 lineHeightCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, lineHeightCustom: "1.5" }}
+        selectedBlockId="list-line-height"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("줄 간격 슬라이더");
+    fireEvent.change(slider, { target: { value: "1.8" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-line-height",
+      expect.objectContaining({ lineHeightCustom: "1.8" }),
+    );
+  });
+
+  it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, textColorCustom: "#ffffff" }}
+        selectedBlockId="list-text-color"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX");
+    fireEvent.change(hexInput, { target: { value: "#112233" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-text-color",
+      expect.objectContaining({ textColorCustom: "#112233" }),
+    );
+  });
+
+  it("불릿 스타일 셀렉트 변경 시 bulletStyle 과 ordered 가 함께 업데이트되어야 한다 (decimal)", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, bulletStyle: "disc", ordered: false }}
+        selectedBlockId="list-bullet-decimal"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("리스트 불릿 스타일");
+    fireEvent.change(select, { target: { value: "decimal" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-bullet-decimal",
+      expect.objectContaining({ bulletStyle: "decimal", ordered: true }),
+    );
+  });
+
+  it("불릿 스타일 셀렉트에서 none 선택 시 ordered 가 false 로 설정되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, bulletStyle: "decimal", ordered: true }}
+        selectedBlockId="list-bullet-none"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("리스트 불릿 스타일");
+    fireEvent.change(select, { target: { value: "none" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-bullet-none",
+      expect.objectContaining({ bulletStyle: "none", ordered: false }),
+    );
+  });
+
+  it("아이템 간 여백 슬라이더 변경 시 updateBlock 이 gapYPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ListPropertiesPanel
+        listProps={{ ...baseProps, gapYPx: 8 }}
+        selectedBlockId="list-gapY"
+        selectedListItemId={null}
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("아이템 간 여백 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "16" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "list-gapY",
+      expect.objectContaining({ gapYPx: 16 }),
+    );
+  });
+});

tests/unit/PreviewAutosave.spec.tsx

@@ -100,4 +100,49 @@ describe("PreviewPage - 자동 복원", () => {
     expect(mockState.updateProjectConfig).toHaveBeenCalledTimes(1);
     expect(mockState.updateProjectConfig).toHaveBeenCalledWith(savedConfig as ProjectConfig);
   });
+
+  it("URL 쿼리의 slug 가 projectConfig.slug 와 달라도 URL slug 기준 autosave 를 복원해야 한다", () => {
+    const savedBlocks: Block[] = [
+      {
+        id: "saved_query_1",
+        type: "text",
+        props: {
+          text: "쿼리 슬러그 기반 프리뷰 블록",
+          align: "center",
+          size: "lg",
+        },
+      } as any,
+    ];
+
+    const savedConfig: ProjectConfig = {
+      title: "쿼리 슬러그 프리뷰 프로젝트",
+      slug: "preview-autosave-from-query",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const payload = {
+      blocks: savedBlocks,
+      projectConfig: savedConfig,
+    };
+
+    // projectConfig.slug 는 다른 값으로 시작하지만,
+    // /preview?slug=preview-autosave-from-query URL 기준으로 autosave 를 복원해야 한다.
+    (mockState.projectConfig as ProjectConfig).slug = "other-slug" as any;
+
+    window.localStorage.setItem(
+      "pb:autosave:preview-autosave-from-query",
+      JSON.stringify(payload),
+    );
+
+    // jsdom 환경에서 URL 쿼리 슬러그를 시뮬레이션한다.
+    window.history.pushState({}, "", "/preview?slug=preview-autosave-from-query");
+
+    render(<PreviewPage />);
+
+    expect(mockState.replaceBlocks).toHaveBeenCalledTimes(1);
+    expect(mockState.replaceBlocks).toHaveBeenCalledWith(savedBlocks as any);
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledTimes(1);
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith(savedConfig as ProjectConfig);
+  });
 });

tests/unit/ProjectSubmissionsPage.spec.tsx

@@ -134,4 +134,28 @@ describe("ProjectSubmissionsPage - 폼 제출 내역", () => {
 
     expect(errorText).toBeTruthy();
   });
+
+  it("상단에 '프로젝트 목록' 링크가 있고 클릭 시 /projects 로 이동해야 한다", async () => {
+    useParamsMock.mockReturnValue({ slug: "test-project" });
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify([]), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<ProjectSubmissionsPage />);
+
+    const backLink = await screen.findByRole("link", { name: "프로젝트 목록" });
+    expect(backLink).toBeTruthy();
+
+    backLink.click();
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith("/projects");
+    });
+  });
 });

tests/unit/ProjectsPage.spec.tsx

@@ -80,6 +80,38 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(previewLinks[1].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-b");
   });
 
+  it("헤더에 전체 제출 내역 페이지(/projects/submissions)로 이동하는 링크가 있어야 한다", async () => {
+    const projects = [
+      {
+        id: "1",
+        title: "테스트 프로젝트 A",
+        slug: "test-project-a",
+        status: "DRAFT",
+        createdAt: "2025-01-01T00:00:00.000Z",
+        updatedAt: "2025-01-01T00:00:00.000Z",
+      },
+    ];
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(projects), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const link = screen.getByText("전체 제출 내역");
+    expect(link).toBeTruthy();
+    expect(link.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
+  });
+
   it("각 프로젝트 행에는 폼 제출 내역 페이지(/projects/[slug]/submissions)로 이동하는 링크가 있어야 한다", async () => {
     const projects = [
       {

tests/unit/PublicPageRendererBlockBackground.spec.tsx

@@ -108,9 +108,7 @@ describe("PublicPageRenderer - 블록 배경색", () => {
     const { queryByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
 
     const formWithBg = queryByTestId("preview-form-controller") as HTMLElement | null;
-    expect(formWithBg).not.toBeNull();
-    // JSDOM 은 #111111 을 rgb(17, 17, 17) 형태로 노출한다.
-    expect(formWithBg!.style.backgroundColor).toBe("rgb(17, 17, 17)");
+    expect(formWithBg).toBeNull();
 
     const blocksWithoutBg: Block[] = [
       {
@@ -129,10 +127,7 @@ describe("PublicPageRenderer - 블록 배경색", () => {
     rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
 
     const formNoBg = queryByTestId("preview-form-controller") as HTMLElement | null;
-    expect(formNoBg).not.toBeNull();
-    expect(
-      formNoBg!.style.backgroundColor === "" || formNoBg!.style.backgroundColor === "transparent",
-    ).toBe(true);
+    expect(formNoBg).toBeNull();
   });
 
   it("section 블록은 backgroundColorCustom 이 설정된 경우에만 섹션 요소에 배경색이 적용되어야 한다", () => {

tests/unit/PublicPageRendererFormFieldStyles.spec.tsx

@@ -63,6 +63,165 @@ describe("PublicPageRenderer - 폼 필드 스타일", () => {
     expect((input as HTMLInputElement).style.borderRadius).toBe("6px");
   });
 
+  it("formInput 블록에서 inputType/email 과 formFieldName 은 type/name/placeholder 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_email_attrs",
+        type: "formInput",
+        props: {
+          label: "이메일",
+          formFieldName: "email_field",
+          inputType: "email",
+          placeholder: "이메일 주소",
+        } as any,
+      },
+    ];
+
+    const { getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const input = getByLabelText("이메일") as HTMLInputElement;
+    expect(input.type).toBe("email");
+    expect(input.name).toBe("email_field");
+    expect(input.placeholder).toBe("이메일 주소");
+  });
+
+  it("formInput 블록의 타이포그래피 커스텀 값은 em 단위 스타일로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_typography",
+        type: "formInput",
+        props: {
+          label: "커스텀 타이포",
+          formFieldName: "typo",
+          fontSizeCustom: "24px",
+          lineHeightCustom: "30px",
+          letterSpacingCustom: "2px",
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
+    const input = wrapper.querySelector('[data-testid="preview-form-input"]') as HTMLInputElement | null;
+    expect(input).not.toBeNull();
+
+    expect(input!.style.fontSize).toBe("1.5em");
+    expect(input!.style.lineHeight).toBe("1.875em");
+    expect(input!.style.letterSpacing).toBe("0.125em");
+  });
+
+  it("formInput 블록에서 라벨 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_hidden_label",
+        type: "formInput",
+        props: {
+          label: "숨김 라벨",
+          formFieldName: "hidden_label",
+          labelDisplay: "hidden",
+        } as any,
+      },
+    ];
+
+    const { getByTestId, getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
+    const span = wrapper.querySelector("span");
+    expect(span).not.toBeNull();
+    expect((span as HTMLSpanElement).className).toContain("sr-only");
+
+    // label 이 숨김이더라도 접근성 측면에서 getByLabelText 로는 접근 가능해야 한다.
+    const input = getByLabelText("숨김 라벨") as HTMLInputElement;
+    expect(input).toBeTruthy();
+  });
+
+  it("formInput 블록에서 라벨 표시 방식이 floating 이면 pb-form-field/pb-form-label 기반 플로팅 라벨 마크업을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_floating_label",
+        type: "formInput",
+        props: {
+          label: "플로팅 라벨",
+          formFieldName: "floating_label",
+          labelDisplay: "floating",
+        } as any,
+      },
+    ];
+
+    const { container, getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const field = container.querySelector(
+      '[data-testid="preview-form-input-wrapper"]',
+    ) as HTMLDivElement | null;
+    expect(field).not.toBeNull();
+    expect(field!.className).toContain("pb-form-field");
+    expect(field!.className).toContain("pb-form-field--floating");
+
+    const firstChild = field!.firstElementChild as HTMLElement | null;
+    const lastChild = field!.lastElementChild as HTMLElement | null;
+    expect(firstChild).not.toBeNull();
+    expect(lastChild).not.toBeNull();
+    // 플로팅 라벨 CSS 는 input/textarea 다음 형제 label 을 기준으로 동작하므로,
+    // DOM 상에서 input 이 먼저, label 이 나중에 와야 한다.
+    expect(firstChild!.getAttribute("data-testid")).toBe("preview-form-input");
+    expect(lastChild!.tagName).toBe("LABEL");
+
+    const label = lastChild as HTMLLabelElement;
+    expect(label.className).toContain("pb-form-label");
+
+    const input = getByLabelText("플로팅 라벨") as HTMLInputElement;
+    expect(input.className).toContain("pb-input");
+    // 플로팅 라벨 모드에서는 placeholder 를 공백으로 두고, 라벨만 인풋 안/위에서 이동시킨다.
+    expect(input.placeholder).toBe(" ");
+    // formFieldName 은 name/id/htmlFor 로 연결되어야 한다.
+    expect(input.name).toBe("floating_label");
+    expect(input.id).toBe("floating_label");
+    expect(label.htmlFor).toBe("floating_label");
+  });
+
+  it("formInput 플로팅 라벨에서 paddingY 값은 pb-form-field--floating 의 --pb-input-padding-y CSS 변수로 전달되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_floating_padding",
+        type: "formInput",
+        props: {
+          label: "플로팅 패딩",
+          formFieldName: "floating_padding",
+          labelDisplay: "floating",
+          paddingY: 16,
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const field = getByTestId("preview-form-input-wrapper") as HTMLDivElement;
+    // paddingY: 16px -> 1rem 으로 변환되어 CSS 변수에 설정되어야 한다.
+    expect(field.style.getPropertyValue("--pb-input-padding-y")).toBe("1rem");
+  });
+
+  it("formInput 플로팅 라벨에서 label 과 placeholder 가 같으면 placeholder 텍스트를 인풋 안에 표시하지 않아야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_floating_same_placeholder",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          labelDisplay: "floating",
+          placeholder: "이름",
+        } as any,
+      },
+    ];
+
+    const { getByLabelText } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const input = getByLabelText("이름") as HTMLInputElement;
+    // 플로팅 라벨 모드에서는 placeholder 를 공백으로 두고, 라벨만 인풋 안/위에서 이동시킨다.
+    expect(input.placeholder).toBe(" ");
+  });
+
   it("formSelect 블록은 색상/패딩/너비/둥글기 스타일을 반영해야 한다", () => {
     const blocks: Block[] = [
       {
@@ -106,6 +265,55 @@ describe("PublicPageRenderer - 폼 필드 스타일", () => {
     expect(select!.style.borderRadius).toBe("6px");
   });
 
+  it("formSelect 블록에서 라벨 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_hidden_label",
+        type: "formSelect",
+        props: {
+          label: "숨김 셀렉트 라벨",
+          formFieldName: "select_hidden",
+          options: [
+            { label: "A", value: "a" },
+          ],
+          labelDisplay: "hidden",
+        } as any,
+      },
+    ];
+
+    const { container } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const label = container.querySelector("label") as HTMLLabelElement | null;
+    expect(label).not.toBeNull();
+    const span = label!.querySelector("span");
+    expect(span).not.toBeNull();
+    expect((span as HTMLSpanElement).className).toContain("sr-only");
+  });
+
+  it("formSelect 블록의 select 요소는 formFieldName 을 name 속성으로 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_name_attr",
+        type: "formSelect",
+        props: {
+          label: "카테고리",
+          formFieldName: "category_field",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const wrapper = getByTestId("preview-form-select") as HTMLElement;
+    const select = wrapper.querySelector("select") as HTMLSelectElement | null;
+    expect(select).not.toBeNull();
+    expect(select!.name).toBe("category_field");
+  });
+
   it("formCheckbox 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
     const blocks: Block[] = [
       {
@@ -148,6 +356,255 @@ describe("PublicPageRenderer - 폼 필드 스타일", () => {
     expect(firstLabel.style.borderRadius).toBe("6px");
   });
 
+  it("formRadio 블록의 옵션 input 은 type/name/value 및 FormBlock.requiredFieldIds 기반 required 를 가져야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_ctrl_radio",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          requiredFieldIds: ["radio_required"],
+        } as any,
+      },
+      {
+        id: "radio_required",
+        type: "formRadio",
+        props: {
+          groupLabel: "플랜",
+          formFieldName: "plan",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const group = getByTestId("preview-form-radio-group") as HTMLElement;
+    const inputs = group.querySelectorAll("input[type='radio']");
+    expect(inputs.length).toBe(2);
+
+    const first = inputs[0] as HTMLInputElement;
+    const second = inputs[1] as HTMLInputElement;
+
+    expect(first.type).toBe("radio");
+    expect(first.name).toBe("plan");
+    expect(first.value).toBe("a");
+    expect(first.required).toBe(true);
+
+    expect(second.type).toBe("radio");
+    expect(second.name).toBe("plan");
+    expect(second.value).toBe("b");
+    expect(second.required).toBe(false);
+  });
+
+  it("formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_pb_option_class",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "옵션들",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
+    const optionLabels = group.querySelectorAll("label");
+    expect(optionLabels.length).toBeGreaterThan(0);
+    optionLabels.forEach((label) => {
+      expect((label as HTMLLabelElement).className).toContain("pb-form-option");
+    });
+  });
+
+  it("formCheckbox 블록에서 optionLayout 이 stacked 이면 옵션 컨테이너가 pb-form-options--stacked 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_layout_stacked",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "옵션들",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+          optionLayout: "stacked",
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const optionsContainer = getByTestId(
+      "preview-form-checkbox-options",
+    ) as HTMLElement;
+    expect(optionsContainer.className).toContain("pb-form-options");
+    expect(optionsContainer.className).toContain("pb-form-options--stacked");
+  });
+
+  it("formCheckbox 블록에서 optionLayout 이 inline 이면 옵션 컨테이너가 pb-form-options--inline 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_layout_inline",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "옵션들",
+          formFieldName: "features",
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+          optionLayout: "inline",
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const optionsContainer = getByTestId(
+      "preview-form-checkbox-options",
+    ) as HTMLElement;
+    expect(optionsContainer.className).toContain("pb-form-options");
+    expect(optionsContainer.className).toContain("pb-form-options--inline");
+  });
+
+  it("formCheckbox 블록에서 그룹 타이틀 표시 방식이 hidden 이면 sr-only 클래스로 시각적으로 숨겨야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_hidden_group_label",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "숨김 체크박스 그룹",
+          formFieldName: "features_hidden",
+          options: [{ label: "옵션 1", value: "opt1" }],
+          groupLabelDisplay: "hidden",
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
+    const spans = group.querySelectorAll("span");
+    const spanArray = Array.from(spans) as HTMLSpanElement[];
+    const groupLabelSpan = spanArray.find((s) => s.textContent === "숨김 체크박스 그룹");
+    expect(groupLabelSpan).toBeTruthy();
+    expect(groupLabelSpan!.className).toContain("sr-only");
+  });
+
+  it("formCheckbox 블록의 옵션 input 은 type/ name/value 및 FormBlock.requiredFieldIds 기반 required 를 가져야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_ctrl_checkbox",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          requiredFieldIds: ["checkbox_required"],
+        } as any,
+      },
+      {
+        id: "checkbox_required",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "기능",
+          formFieldName: "feature",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
+    const inputs = group.querySelectorAll("input[type='checkbox']");
+    expect(inputs.length).toBe(2);
+
+    const first = inputs[0] as HTMLInputElement;
+    const second = inputs[1] as HTMLInputElement;
+
+    expect(first.type).toBe("checkbox");
+    expect(first.name).toBe("feature");
+    expect(first.value).toBe("a");
+    expect(first.required).toBe(true);
+
+    expect(second.type).toBe("checkbox");
+    expect(second.name).toBe("feature");
+    expect(second.value).toBe("b");
+    expect(second.required).toBe(false);
+  });
+
+  it("formRadio 블록에서 그룹 타이틀 레이아웃이 inline 이면 그룹 컨테이너가 가로 정렬되고 세로 중앙 정렬 및 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_label_inline_preview",
+        type: "formRadio",
+        props: {
+          groupLabel: "플랜 인라인",
+          formFieldName: "plan-inline",
+          groupLabelDisplay: "visible",
+          labelLayout: "inline",
+          labelGapPx: 16,
+          options: [
+            { label: "플랜 A", value: "a" },
+            { label: "플랜 B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+    const group = getByTestId("preview-form-radio-group") as HTMLElement;
+
+    expect(group.className).toContain("flex");
+    expect(group.className).toContain("flex-row");
+    expect(group.className).toContain("items-center");
+    // labelGapPx: 16px → 1em
+    expect(group.style.columnGap).toBe("1em");
+  });
+
+  it("formCheckbox 블록에서 그룹 타이틀 레이아웃이 inline 이면 그룹 컨테이너가 가로 정렬되고 세로 중앙 정렬 및 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_label_inline_preview",
+        type: "formCheckbox",
+        props: {
+          groupLabel: "체크 인라인",
+          formFieldName: "features-inline",
+          groupLabelDisplay: "visible",
+          labelLayout: "inline",
+          labelGapPx: 12,
+          options: [
+            { label: "옵션 1", value: "opt1" },
+            { label: "옵션 2", value: "opt2" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+    const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
+
+    expect(group.className).toContain("flex");
+    expect(group.className).toContain("flex-row");
+    expect(group.className).toContain("items-center");
+    // labelGapPx: 12px → 0.75em
+    expect(group.style.columnGap).toBe("0.75em");
+  });
+
   it("formRadio 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
     const blocks: Block[] = [
       {
@@ -189,4 +646,30 @@ describe("PublicPageRenderer - 폼 필드 스타일", () => {
     expect(firstLabel.style.borderColor).toBe("rgb(255, 0, 0)");
     expect(firstLabel.style.borderRadius).toBe("6px");
   });
+
+  it("formRadio 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_pb_option_class",
+        type: "formRadio",
+        props: {
+          groupLabel: "플랜",
+          formFieldName: "plan",
+          options: [
+            { label: "플랜 A", value: "a" },
+            { label: "플랜 B", value: "b" },
+          ],
+        } as any,
+      },
+    ];
+
+    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
+
+    const group = getByTestId("preview-form-radio-group") as HTMLElement;
+    const optionLabels = group.querySelectorAll("label");
+    expect(optionLabels.length).toBeGreaterThan(0);
+    optionLabels.forEach((label) => {
+      expect((label as HTMLLabelElement).className).toContain("pb-form-option");
+    });
+  });
 });

tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx

@@ -25,11 +25,26 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
           submitTarget: "internal",
           successMessage: "폼 성공 메시지 (config)",
           errorMessage: "폼 에러 메시지 (config)",
-          fields: [
-            { id: "f1", name: "name", label: "이름", type: "text", required: true },
-          ],
-          fieldIds: [],
-          submitButtonId: null,
+          fieldIds: ["field_name"],
+          requiredFieldIds: ["field_name"],
+          submitButtonId: "submit_btn",
+        } as any,
+      },
+      {
+        id: "field_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          required: true,
+        } as any,
+      },
+      {
+        id: "submit_btn",
+        type: "button",
+        props: {
+          label: "제출하기",
+          href: "#",
         } as any,
       },
     ];
@@ -45,16 +60,13 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
-    expect(form).toBeTruthy();
+    const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: "홍길동" } });
 
-    const input = form.querySelector('input[name="name"]') as HTMLInputElement | null;
-    expect(input).not.toBeNull();
-
-    const submitButton = screen.getByRole("button", { name: "폼 전송" });
+    const submitButton = screen.getByRole("link", { name: "제출하기" });
     expect(submitButton).toBeTruthy();
 
-    fireEvent.submit(form);
+    fireEvent.click(submitButton);
 
     await waitFor(() => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -76,11 +88,26 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
           submitTarget: "internal",
           successMessage: "폼 성공 메시지 (config)",
           errorMessage: "폼 에러 메시지 (config)",
-          fields: [
-            { id: "f1", name: "name", label: "이름", type: "text", required: true },
-          ],
-          fieldIds: [],
-          submitButtonId: null,
+          fieldIds: ["field_name"],
+          requiredFieldIds: ["field_name"],
+          submitButtonId: "submit_btn",
+        } as any,
+      },
+      {
+        id: "field_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          required: true,
+        } as any,
+      },
+      {
+        id: "submit_btn",
+        type: "button",
+        props: {
+          label: "제출하기",
+          href: "#",
         } as any,
       },
     ];
@@ -96,13 +123,13 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
-    expect(form).toBeTruthy();
+    const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: "홍길동" } });
 
-    const submitButton = screen.getByRole("button", { name: "폼 전송" });
+    const submitButton = screen.getByRole("link", { name: "제출하기" });
     expect(submitButton).toBeTruthy();
 
-    fireEvent.submit(form);
+    fireEvent.click(submitButton);
 
     await waitFor(() => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -113,4 +140,124 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
       expect(errorMsg).toBeTruthy();
     });
   });
+
+  it("필수 필드가 비어 있고 errorMessage 가 없으면 기본 문구에 필수 항목 라벨을 포함해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_required_default_msg",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          successMessage: "폼 성공 메시지 (config)",
+          fieldIds: ["field_email"],
+          requiredFieldIds: ["field_email"],
+          submitButtonId: "submit_btn",
+        } as any,
+      },
+      {
+        id: "field_email",
+        type: "formInput",
+        props: {
+          label: "이메일",
+          formFieldName: "email",
+          required: true,
+        } as any,
+      },
+      {
+        id: "submit_btn",
+        type: "button",
+        props: {
+          label: "제출하기",
+          href: "#",
+        } as any,
+      },
+    ];
+
+    const fetchMock = vi.fn(async () =>
+      new Response("ok", {
+        status: 200,
+        headers: { "Content-Type": "text/plain" },
+      }),
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (globalThis as any).fetch = fetchMock;
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    expect(submitButton).toBeTruthy();
+
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(0);
+    });
+
+    await waitFor(() => {
+      const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이메일/);
+      expect(errorMsg).toBeTruthy();
+    });
+  });
+
+  it("필수 필드가 비어 있으면 요청을 보내지 않고 필수 항목 안내 메시지를 표시해야 한다 (errorMessage 설정 시)", async () => {
+    const blocks: Block[] = [
+      {
+        id: "form_required",
+        type: "form",
+        props: {
+          kind: "contact",
+          submitTarget: "internal",
+          successMessage: "폼 성공 메시지 (config)",
+          errorMessage: "폼 에러 메시지 (config)",
+          fieldIds: ["field_name"],
+          requiredFieldIds: ["field_name"],
+          submitButtonId: "submit_btn",
+        } as any,
+      },
+      {
+        id: "field_name",
+        type: "formInput",
+        props: {
+          label: "이름",
+          formFieldName: "name",
+          required: true,
+        } as any,
+      },
+      {
+        id: "submit_btn",
+        type: "button",
+        props: {
+          label: "제출하기",
+          href: "#",
+        } as any,
+      },
+    ];
+
+    const fetchMock = vi.fn(async () =>
+      new Response("ok", {
+        status: 200,
+        headers: { "Content-Type": "text/plain" },
+      }),
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (globalThis as any).fetch = fetchMock;
+
+    render(<PublicPageRenderer blocks={blocks} />);
+
+    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    expect(submitButton).toBeTruthy();
+
+    // 이름 필드를 비운 채로 제출한다.
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(0);
+    });
+
+    await waitFor(() => {
+      const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이름/);
+      expect(errorMsg).toBeTruthy();
+    });
+  });
 });

tests/unit/PublicPageRendererSectionLayout.spec.tsx

@@ -5,7 +5,7 @@ import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor
 
 // PublicPageRenderer 섹션/루트 레이아웃 TDD
 // - Export 레이어의 pb-root / pb-section-* 구조와 개념적으로 대응되는 프리뷰 레이아웃을 고정한다.
-// - 정확한 px 값 비교 대신, 주요 Tailwind 레이아웃 클래스 존재 여부를 검증한다.
+// - Tailwind 유틸 대신 builder.css 의 pb-* 레이아웃 클래스를 기준으로 검증한다.
 
 describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
   afterEach(() => {
@@ -47,7 +47,7 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     return [section, text];
   };
 
-  it("섹션 레이아웃은 mx-auto / max-w / px-* 및 flex 컬럼/갭 구조로 렌더되어야 한다", () => {
+  it("섹션 레이아웃은 pb-section / pb-section-inner / pb-section-columns / pb-section-column 구조로 렌더되어야 한다", () => {
     const blocks: Block[] = makeSectionWithText();
 
     render(<PublicPageRenderer blocks={blocks} />);
@@ -56,20 +56,12 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     const columns = screen.getByTestId("preview-section-columns") as HTMLDivElement;
 
     // Export 의 pb-section-inner / pb-section-columns 에 대응되는 레이아웃 구조를 최소한으로 보장한다.
-    expect(inner.className).toContain("mx-auto");
-    expect(inner.className).toContain("px-4");
-    expect(inner.className).toMatch(/max-w-/);
+    expect(inner.className).toContain("pb-section-inner");
+    expect(columns.className).toContain("pb-section-columns");
 
-    expect(columns.className).toContain("flex");
-    // gapX 기본값(md)에 대해 gap-8 이 사용되는 현재 구현을 고정한다.
-    expect(columns.className).toContain("gap-8");
-
-    // 컬럼 래퍼는 flex-col 과 일정한 세로 간격을 가진다.
-    const columnWrapper = columns.querySelector("div.flex.flex-col") as HTMLDivElement | null;
+    // 컬럼 래퍼는 pb-section-column 클래스를 가지며, 섹션 텍스트가 그 안에 포함되어야 한다.
+    const columnWrapper = columns.querySelector(".pb-section-column") as HTMLDivElement | null;
     expect(columnWrapper).not.toBeNull();
-    if (columnWrapper) {
-      expect(columnWrapper.className).toContain("gap-4");
-    }
 
     // 섹션 텍스트가 실제로 섹션 안에 렌더되는지 확인한다.
     const textEl = screen.getByText("섹션 레이아웃 텍스트");
@@ -77,7 +69,7 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
     expect(section).not.toBeNull();
   });
 
-  it("루트 블록은 상단 섹션 내 max-width 컨테이너 안에서 렌더되어야 한다", () => {
+  it("루트 블록은 pb-root / pb-root-inner 구조 안에서 렌더되어야 한다", () => {
     const rootTextProps: TextBlockProps = {
       text: "루트 레이아웃 텍스트",
       align: "left",
@@ -98,23 +90,15 @@ describe("PublicPageRenderer - 섹션/루트 레이아웃", () => {
 
     const rootTextEl = screen.getByText("루트 레이아웃 텍스트") as HTMLParagraphElement;
 
-    // 루트 텍스트는 상단 섹션(py-12) 안에 존재해야 한다.
+    // 루트 텍스트는 상단 pb-root 섹션 안에 존재해야 한다.
     const rootSection = rootTextEl.closest("section");
     expect(rootSection).not.toBeNull();
     if (!rootSection) return;
 
-    expect(rootSection.className).toContain("py-12");
+    expect(rootSection.className).toContain("pb-root");
 
-    // 섹션 바로 아래의 max-width 컨테이너 구조를 확인한다.
-    const innerContainer = rootSection.querySelector("div");
+    // 섹션 바로 아래의 pb-root-inner 컨테이너 구조를 확인한다.
+    const innerContainer = rootSection.querySelector(".pb-root-inner");
     expect(innerContainer).not.toBeNull();
-    if (!innerContainer) return;
-
-    const className = innerContainer.className;
-    expect(className).toContain("mx-auto");
-    expect(className).toContain("max-w-3xl");
-    expect(className).toContain("px-4");
-    expect(className).toContain("flex");
-    expect(className).toContain("gap-4");
   });
 });

tests/unit/PublicPageRendererTextStyles.spec.tsx

@@ -25,17 +25,17 @@ describe("PublicPageRenderer - 텍스트 블록 스타일", () => {
     } as any;
   };
 
-  it("기본 텍스트 블록은 text-left / text-base 및 기본 색상으로 렌더되어야 한다", () => {
+  it("기본 텍스트 블록은 pb-text-left / pb-text-base 및 기본 색상(pb-text-color-strong)으로 렌더되어야 한다", () => {
     const blocks: Block[] = [makeTextBlock()];
 
     render(<PublicPageRenderer blocks={blocks} />);
 
     const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
 
-    expect(el.className).toContain("text-left");
-    expect(el.className).toContain("text-base");
-    // 기본 색상은 Tailwind text-slate-50 클래스로 고정되어 있다.
-    expect(el.className).toContain("text-slate-50");
+    expect(el.className).toContain("pb-text-left");
+    expect(el.className).toContain("pb-text-base");
+    // 기본 색상은 builder.css 의 pb-text-color-strong 클래스로 표현된다.
+    expect(el.className).toContain("pb-text-color-strong");
   });
 
   it("fontSizeMode=custom, fontSizeCustom, colorCustom, backgroundColorCustom 이 설정되면 스타일이 인라인으로 반영되어야 한다", () => {
@@ -53,8 +53,8 @@ describe("PublicPageRenderer - 텍스트 블록 스타일", () => {
 
     const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
 
-    // 정렬 클래스
-    expect(el.className).toContain("text-center");
+    // 정렬 클래스는 pb-text-center 로 반영된다.
+    expect(el.className).toContain("pb-text-center");
     // 커스텀 폰트 크기: sizeClass 는 비워지고, 인라인 스타일로 설정된다.
     expect(el.style.fontSize).toBe("1.5em");
     // 커스텀 색상/배경색

tests/unit/SectionPropertiesPanel.spec.tsx

@@ -17,6 +17,29 @@ describe("SectionPropertiesPanel", () => {
     cleanup();
   });
 
+  it("섹션 배경 색상 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <SectionPropertiesPanel
+        sectionProps={{
+          ...baseProps,
+          backgroundColorCustom: "#111111",
+        }}
+        selectedBlockId="section-bg-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const hexInput = screen.getByLabelText("섹션 배경 색상 HEX 입력");
+    fireEvent.change(hexInput, { target: { value: "#112233" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "section-bg-1",
+      expect.objectContaining({ backgroundColorCustom: "#112233" }),
+    );
+  });
+
   it("가로 위치 프리셋 드롭다운 변경 시 backgroundImagePositionXPercent 가 0/50/100 등으로 설정된다", () => {
     const updateBlock = vi.fn();
 

tests/unit/dividerHelpers.spec.ts

@@ -42,6 +42,22 @@ describe("dividerHelpers.computeDividerExportTokens", () => {
     expect(zeroTokens.style).toContain("margin:1em 0;");
   });
 
+  it("widthMode=\"fixed\" 인 경우 widthPx 는 em 단위 width 로 Export style 에 반영되어야 한다", () => {
+    const tokens = computeDividerExportTokens(
+      {
+        ...baseProps,
+        align: "center",
+        widthMode: "fixed",
+        widthPx: 480,
+      },
+      escapers,
+    );
+
+    expect(tokens.style).toContain("width:30em");
+    expect(tokens.style).toContain("margin-left:auto");
+    expect(tokens.style).toContain("margin-right:auto");
+  });
+
   it("Export 구분선 style 에서는 border-bottom 두께를 제외하고 px 단위가 없어야 한다", () => {
     const tokens = computeDividerExportTokens({
       ...baseProps,

tests/unit/formHelpers.spec.ts

@@ -400,6 +400,7 @@ describe("formHelpers.computeFormControllerPublicTokens", () => {
 				kind: "contact",
 				submitTarget: "internal",
 				fieldIds: ["input-1", "checkbox-1"],
+				requiredFieldIds: ["input-1", "checkbox-1"],
 				submitButtonId: "btn-1",
 				formWidthMode: "fixed",
 				formWidthPx: 320,
@@ -473,7 +474,7 @@ describe("formHelpers.computeFormControllerPublicTokens", () => {
 		expect(tokens.submitLabel).toBe("컨트롤러 버튼");
 	});
 
-	it("fields 가 있을 때는 fields 를 사용하고, 없으면 빈 배열을 반환해야 한다", () => {
+	it("fieldIds 가 없으면 fields 설정과 관계없이 빈 배열을 반환해야 한다", () => {
 		const formWithFields: Block = {
 			id: "form-2",
 			type: "form",
@@ -494,12 +495,9 @@ describe("formHelpers.computeFormControllerPublicTokens", () => {
 
 		const tokensWithFields = computeFormControllerPublicTokens(formWithFields, [formWithFields]);
 
-		expect(tokensWithFields.fields).toHaveLength(1);
-		expect(tokensWithFields.fields[0].id).toBe("f1");
-		expect(tokensWithFields.fields[0].name).toBe("email");
-		expect(tokensWithFields.fields[0].label).toBe("이메일");
-		expect(tokensWithFields.fields[0].type).toBe("email");
-		expect(tokensWithFields.fields[0].required).toBe(true);
+		// 프리뷰/퍼블릭 렌더러에서는 fieldIds 로 연결된 필드 블록만 사용하고,
+		// props.fields(v1 설정)는 무시해야 한다.
+		expect(tokensWithFields.fields).toHaveLength(0);
 
 		const formFallback: Block = {
 			id: "form-3",

tests/unit/listHelpers.spec.ts

@@ -150,14 +150,14 @@ describe("listHelpers.computeListEditorTokens", () => {
 });
 
 describe("listHelpers.computeListPublicTokens", () => {
-  it("align 값에 따라 alignClass 가 text-left/center/right 로 설정되어야 한다", () => {
+  it("align 값에 따라 alignClass 가 pb-text-left/center/right 로 설정되어야 한다", () => {
     const leftTokens = computeListPublicTokens({ ...baseProps, align: "left" });
     const centerTokens = computeListPublicTokens({ ...baseProps, align: "center" });
     const rightTokens = computeListPublicTokens({ ...baseProps, align: "right" });
 
-    expect(leftTokens.alignClass).toBe("text-left");
-    expect(centerTokens.alignClass).toBe("text-center");
-    expect(rightTokens.alignClass).toBe("text-right");
+    expect(leftTokens.alignClass).toBe("pb-text-left");
+    expect(centerTokens.alignClass).toBe("pb-text-center");
+    expect(rightTokens.alignClass).toBe("pb-text-right");
   });
 
   it("gapYPx 와 gapY 토큰에 따라 gapEm 이 px/16 값으로 계산되어야 한다", () => {

tests/unit/sectionHelpers.spec.ts

@@ -75,6 +75,32 @@ describe("sectionHelpers.computeSectionExportTokens", () => {
     expect(tokens.sectionStyleParts).toContain("overflow:hidden");
   });
 
+  it("paddingYPx / maxWidthPx / gapXPx 는 Export 토큰 styleParts 에 em 단위로 반영되어야 한다", () => {
+    const tokens = computeSectionExportTokens({
+      ...baseProps,
+      backgroundColorCustom: "#123456",
+      paddingYPx: 80,
+      maxWidthPx: 960,
+      gapXPx: 32,
+    } as SectionBlockProps);
+
+    // 섹션 wrapper: 배경색 + 세로 패딩(em)
+    expect(tokens.sectionStyleParts).toContain("background-color:#123456");
+    expect(tokens.sectionStyleParts).toContain("padding-top:5em");
+    expect(tokens.sectionStyleParts).toContain("padding-bottom:5em");
+
+    // 내부 래퍼: 최대 폭(em)
+    expect(tokens.innerWrapperStyleParts).toContain("max-width:60em");
+
+    // 컬럼 컨테이너: column-gap(em)
+    expect(tokens.columnsStyleParts).toContain("column-gap:2em");
+
+    // px 단위는 어디에도 포함되면 안 된다.
+    expectNoPxInStyleParts(tokens.sectionStyleParts);
+    expectNoPxInStyleParts(tokens.innerWrapperStyleParts);
+    expectNoPxInStyleParts(tokens.columnsStyleParts);
+  });
+
   it("Export 섹션 sectionStyleParts 에는 px 단위 값이 포함되지 않아야 한다", () => {
     const tokens = computeSectionExportTokens({
       ...baseProps,
@@ -88,6 +114,8 @@ describe("sectionHelpers.computeSectionExportTokens", () => {
     } as SectionBlockProps);
 
     expectNoPxInStyleParts(tokens.sectionStyleParts);
+    expectNoPxInStyleParts(tokens.innerWrapperStyleParts);
+    expectNoPxInStyleParts(tokens.columnsStyleParts);
   });
 });
 

uploads/024a6d52-b3b6-4e47-838f-993e298b8cc4

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/0dcbdce9-b21b-4fe1-80dc-7e370eafa2b9

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/0ee4d32a-cd9d-4051-89c4-fa3448cad429

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/1332002d-e920-4d18-a337-09f3dc4f166c

@@ -0,0 +1 @@
+dummy-video

uploads/2cf1cca5-a9b8-44b3-8865-f712ed76a5ae

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/3356ec8a-5de4-4cc2-91d1-cd71e21b2cf3

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/3e10e8d0-b9cf-4b10-8106-0f2e62dd038d

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/509d145c-7826-45e1-b54d-ce07f1cd86bb

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/58c84807-c36f-4277-a439-7550483b8ab4

@@ -0,0 +1 @@
+dummy-video

uploads/5bf824c0-cd99-4e23-a388-f177442f51b8

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/606e1fad-9331-4794-88e3-3ac16f5ab4c9

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/73ca2938-db54-48be-a0a0-ca3bfb922bdc

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/74eb8997-68a7-4cc4-9ac8-9bcb8fbb4d5f

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/7c43661e-0383-47f1-8002-736bb4855648

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/8ce3a123-62ac-4dcf-b2e6-4cc4de14aa7c

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/8f278435-2797-4b1a-92d2-c4c8b5156cbf

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/8fca223f-fda4-4504-8808-1e4213c4d397

@@ -0,0 +1 @@
+dummy-video

uploads/945bbd4d-b369-4088-aa73-64fc435fd958

@@ -0,0 +1 @@
+dummy-video

uploads/94ecf769-f8a2-4161-945d-eb188306e0ba

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/954273ad-c2cc-48c8-bbbb-f3aa10245a75

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/973b0f8d-3c0f-4b3b-a57b-6286dbf50bf4

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/985a81f4-c18a-450c-a174-dd1ab5d8e70e

@@ -0,0 +1 @@
+dummy-video

uploads/9e80973a-67e0-473b-a2e5-0c9398ef9a9d

@@ -0,0 +1 @@
+dummy-video

uploads/a7a581c0-307d-4f91-a70c-bec467994719

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/af916702-ea24-4cb6-ac25-2b5bd90de064

@@ -0,0 +1 @@
+dummy-video

uploads/bbefb266-b279-4044-bac8-bbc748b4974c

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/c9c0c8fb-e541-4aa3-a4c6-126b5c189fc8

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/cf6d7855-26ce-45fc-9262-7c3092015434

@@ -0,0 +1 @@
+dummy-video

uploads/d2c60582-febf-4fba-af87-6df18e1699ed

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/df0f179b-f872-4b11-b600-874401bf8d73

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/ec5eb630-141a-47ed-bebd-87425c13e331

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/f182d17d-536e-45e1-ac91-5a9361b4ffac

@@ -0,0 +1 @@
+dummy-video

uploads/f65645f9-4321-44f4-a0a3-365ac9908841

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/f77f6600-a364-43ce-a2f2-e463e2477702

@@ -0,0 +1 @@
+PNG TEST FIXTURE

uploads/test-image-1764651816626

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764679205355

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764679767710

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764685822135

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764723073453

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764725854480

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764744172231

@@ -0,0 +1 @@
+dummy-image

uploads/test-image-1764914447284

@@ -0,0 +1 @@
+dummy-image