스타일 수정

src/features/editor/components/PublicPageRenderer.tsx

@@ -26,7 +26,7 @@ import {
   buildVideoEmbedUrl,
   computeVideoPublicTokens,
 } from "@/features/editor/utils/videoHelpers";
-import { computeButtonPublicTokens } from "@/features/editor/utils/buttonHelpers";
+import { computeButtonPublicTokens, computeButtonPbTokens } from "@/features/editor/utils/buttonHelpers";
 import { computeTextPublicTokens } from "@/features/editor/utils/textHelpers";
 import { computeDividerPublicTokens } from "@/features/editor/utils/dividerHelpers";
 import { computeImagePublicTokens } from "@/features/editor/utils/imageHelpers";
@@ -50,8 +50,12 @@ export function getSectionLayoutConfig(props: SectionBlockProps) {
       ? "bg-sky-900"
       : "bg-slate-950";
 
+  // 섹션 수직 패딩: builder.css 의 pb-section-py-sm/md/lg (1rem/1.5rem/2.5rem)에 대응
+  // - sm  → 1rem  → py-4
+  // - md  → 1.5rem → py-6
+  // - lg  → 2.5rem → py-10
   const paddingYClass =
-    props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
+    props.paddingY === "sm" ? "py-4" : props.paddingY === "lg" ? "py-10" : "py-6";
 
   const maxWidthClass =
     props.maxWidthMode === "narrow"
@@ -302,16 +306,40 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
 
     if (block.type === "button") {
       const props = block.props as ButtonBlockProps;
-      const tokens = computeButtonPublicTokens(props);
-      const buttonStyle: CSSProperties = { ...tokens.styleOverrides };
+
+      const pbTokens = computeButtonPbTokens({
+        align: props.align ?? "left",
+        size: props.size ?? "md",
+        variant: props.variant ?? "solid",
+        colorPalette: props.colorPalette ?? "primary",
+        borderRadius: props.borderRadius ?? "md",
+        fullWidth: props.fullWidth ?? false,
+        widthMode: props.widthMode ?? undefined,
+        widthPx: props.widthPx ?? undefined,
+        paddingX: props.paddingX ?? undefined,
+        paddingY: props.paddingY ?? undefined,
+        fillColorCustom: props.fillColorCustom ?? undefined,
+        strokeColorCustom: props.strokeColorCustom ?? undefined,
+        textColorCustom: props.textColorCustom ?? undefined,
+      });
+
+      const publicTokens = computeButtonPublicTokens(props);
+      const buttonStyle: CSSProperties = { ...publicTokens.styleOverrides };
+
+      const wrapperClass = pbTokens.alignClass;
+      const buttonClassName = [
+        "pb-btn-base",
+        pbTokens.sizeClass,
+        pbTokens.variantClass,
+        pbTokens.radiusClass,
+        publicTokens.widthClass,
+      ]
+        .filter(Boolean)
+        .join(" ");
 
       return (
-        <div key={block.id} className={tokens.alignClass}>
-          <a
-            href={props.href}
-            className={`inline-flex items-center justify-center text-sm font-medium hover:bg-sky-500 transition-colors ${tokens.widthClass}`}
-            style={buttonStyle}
-          >
+        <div key={block.id} className={wrapperClass}>
+          <a href={props.href} className={buttonClassName} style={buttonStyle}>
             <span className="whitespace-pre-wrap">{props.label}</span>
           </a>
         </div>
@@ -326,13 +354,13 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
         <div
           key={block.id}
           data-testid="preview-divider"
-          className={`flex ${tokens.alignClass}`}
+          className={`flex w-full ${tokens.alignClass}`}
           style={{ marginTop: tokens.wrapperMarginEm, marginBottom: tokens.wrapperMarginEm }}
         >
-          <div style={tokens.innerStyle}>
+          <div className={tokens.innerWidthClass} style={tokens.innerStyle}>
             <div
               data-testid="preview-divider-line"
-              className={`${tokens.thicknessClass} ${tokens.innerWidthClass}`}
+              className={tokens.thicknessClass}
               style={tokens.lineStyle}
             />
           </div>
@@ -367,27 +395,17 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
 
         return (
           <ListTag
-            className={tokens.alignClass}
+            className={`pb-list ${tokens.alignClass}`}
             style={{
               ...tokens.listStyle,
               listStyleType:
                 tokens.bulletStyle === "none"
                   ? "none"
                   : tokens.bulletStyle,
-              paddingLeft: 12 + level * 8,
             }}
           >
-            {nodes.map((node, index) => (
-              <li
-                key={node.id}
-                style={
-                  index < nodes.length - 1
-                    ? {
-                        marginBottom: `${tokens.gapEm}em`,
-                      }
-                    : undefined
-                }
-              >
+            {nodes.map((node) => (
+              <li key={node.id}>
                 {node.text}
                 {node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
               </li>