리스트/에디터 스타일 정리 및 버그 수정

src/features/editor/utils/formHelpers.ts

@@ -263,6 +263,27 @@ export const computeFormInputEditorTokens = (props: FormInputBlockProps): FormIn
     fieldStyle.borderRadius = 9999;
   }
 
+  // 에디터에서는 px 기반 padding/타이포 값을 그대로 fieldStyle 에 반영해 미리보기에서 변화가 보이도록 한다.
+  if (typeof props.paddingX === "number" && props.paddingX >= 0) {
+    fieldStyle.paddingInline = `${props.paddingX}px`;
+  }
+
+  if (typeof props.paddingY === "number" && props.paddingY >= 0) {
+    fieldStyle.paddingBlock = `${props.paddingY}px`;
+  }
+
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    fieldStyle.fontSize = props.fontSizeCustom.trim();
+  }
+
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    fieldStyle.lineHeight = props.lineHeightCustom.trim();
+  }
+
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    fieldStyle.letterSpacing = props.letterSpacingCustom.trim();
+  }
+
   const labelLayout = props.labelLayout ?? "stacked";
   const isInline = labelLayout === "inline";
 
@@ -324,6 +345,27 @@ export const computeFormSelectEditorTokens = (props: FormSelectBlockProps): Form
     fieldStyle.borderRadius = 9999;
   }
 
+  // 체크박스/라디오 그룹도 에디터에서 padding/타이포 스타일을 일부 반영해준다.
+  if (typeof props.paddingX === "number" && props.paddingX >= 0) {
+    fieldStyle.paddingInline = `${props.paddingX}px`;
+  }
+
+  if (typeof props.paddingY === "number" && props.paddingY >= 0) {
+    fieldStyle.paddingBlock = `${props.paddingY}px`;
+  }
+
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    fieldStyle.fontSize = props.fontSizeCustom.trim();
+  }
+
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    fieldStyle.lineHeight = props.lineHeightCustom.trim();
+  }
+
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    fieldStyle.letterSpacing = props.letterSpacingCustom.trim();
+  }
+
   return { fieldStyle };
 };
 
@@ -355,6 +397,26 @@ export const computeFormOptionGroupEditorTokens = (
   } else if (radius === "lg" || radius === "full") {
     fieldStyle.borderRadius = 9999;
   }
+  
+  if (typeof props.paddingX === "number" && props.paddingX >= 0) {
+    fieldStyle.paddingInline = `${props.paddingX}px`;
+  }
+
+  if (typeof props.paddingY === "number" && props.paddingY >= 0) {
+    fieldStyle.paddingBlock = `${props.paddingY}px`;
+  }
+
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    fieldStyle.fontSize = props.fontSizeCustom.trim();
+  }
+
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    fieldStyle.lineHeight = props.lineHeightCustom.trim();
+  }
+
+  if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+    fieldStyle.letterSpacing = props.letterSpacingCustom.trim();
+  }
 
   return { fieldStyle };
 };