e2e 오류 수정

src/features/editor/components/PublicPageRenderer.tsx

@@ -523,9 +523,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       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 baseClass = ["text-slate-200", tokens.widthClass].filter(Boolean).join(" ");
       const layoutClass = isInlineLayout ? "flex flex-row items-center" : "flex flex-col gap-1";
 
       const groupStyle: CSSProperties = {
@@ -618,9 +616,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       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 baseClass = ["text-slate-200", tokens.widthClass].filter(Boolean).join(" ");
       const layoutClass = isInlineLayout ? "flex flex-row items-center" : "flex flex-col gap-1";
 
       const groupStyle: CSSProperties = {

src/features/editor/utils/formHelpers.ts

@@ -58,16 +58,19 @@ const computeRadiusPx = (radius: unknown): number => {
 };
 
 // Editor 레이어용 모서리 둥글기 매핑
+// Export/Public 과 동일한 스케일을 사용하되, full 에 대해서만 pill 스타일(9999px)을 유지한다.
 // - none: 0px
-// - sm: 4px
-// - md: 8px (기본)
-// - lg/full: 9999px (pill 스타일)
+// - sm: 2px
+// - md: 4px (기본)
+// - lg: 6px
+// - full: 9999px
 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;
+  if (token === "sm") return 2;
+  if (token === "lg") return 6;
+  if (token === "full") return 9999;
+  return 4;
 };
 
 const computeWidthMode = (props: { widthMode?: string; fullWidth?: boolean }): "auto" | "full" | "fixed" => {
@@ -409,8 +412,19 @@ export const computeFormSelectEditorTokens = (props: FormSelectBlockProps): Form
     fieldStyle.width = `${props.widthPx}px`;
   }
 
-  // 모서리 둥글기: Editor 레이어에서는 lg/full 토큰을 pill 형태(9999px)로 사용한다.
-  const selectRadiusPx = computeEditorRadiusPx(props.borderRadius);
+  // 모서리 둥글기: formSelect 는 Export/Public 레이어와 동일한 스케일(0/2/4/6/9999px)을 사용해
+  // 에디터/프리뷰/퍼블릭 간 border-radius 가 일치하도록 한다.
+  const selectRadiusToken = props.borderRadius ?? "md";
+  const selectRadiusPx =
+    selectRadiusToken === "none"
+      ? 0
+      : selectRadiusToken === "sm"
+        ? 2
+        : selectRadiusToken === "lg"
+          ? 6
+          : selectRadiusToken === "full"
+            ? 9999
+            : 4;
   fieldStyle.borderRadius = selectRadiusPx;
 
   // 체크박스/라디오 그룹도 에디터에서 padding/타이포 스타일을 일부 반영해준다.

src/features/editor/utils/listHelpers.ts

@@ -53,6 +53,11 @@ export const computeListExportTokens = (props: ListBlockProps): ListExportTokens
           : 8;
   const gapEm = gapPx / 16;
 
+  // 리스트 아이템 간 간격은 CSS 커스텀 프로퍼티 --pb-list-gap 으로 전달한다.
+  // 이렇게 하면 margin-bottom 계산은 builder.css 레이어에서만 수행되어,
+  // 정적 Export HTML 의 style 속성에 직접적인 margin-bottom 이 포함되지 않는다.
+  listStyleParts.push(`--pb-list-gap:${gapEm}em`);
+
   if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
     listStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
   }
@@ -172,6 +177,10 @@ export const computeListPublicTokens = (props: ListBlockProps): ListPublicTokens
     listStyle.backgroundColor = props.backgroundColorCustom.trim();
   }
 
+  // 리스트 아이템 간 여백을 CSS 변수로 노출한다. 실제 margin-bottom 은 builder.css 의
+  // .pb-list > li 규칙에서 --pb-list-gap 값을 참조해 계산한다.
+  (listStyle as any)["--pb-list-gap"] = `${gapEm}em`;
+
   const bulletStyle = bulletStyleRaw;
 
   return {