섹션 레이아웃 및 템플릿 스타일 개선

src/features/editor/components/PublicPageRenderer.tsx

@@ -7,12 +7,58 @@ import type {
   ButtonBlockProps,
   ImageBlockProps,
   SectionBlockProps,
+  DividerBlockProps,
+  ListBlockProps,
+  ListItemNode,
   FormBlockProps,
+  FormInputBlockProps,
+  FormSelectBlockProps,
+  FormCheckboxBlockProps,
+  FormRadioBlockProps,
   FormSelectOption,
   FormRadioOption,
   FormCheckboxOption,
 } from "@/features/editor/state/editorStore";
 
+// 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸
+// (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.)
+export function getSectionLayoutConfig(props: SectionBlockProps) {
+  const backgroundClass =
+    props.background === "muted"
+      ? "bg-slate-900"
+      : props.background === "primary"
+      ? "bg-sky-900"
+      : "bg-slate-950";
+
+  const paddingYClass =
+    props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
+
+  const maxWidthClass =
+    props.maxWidthMode === "narrow"
+      ? "max-w-3xl"
+      : props.maxWidthMode === "wide"
+      ? "max-w-6xl"
+      : "max-w-5xl";
+
+  const gapXClass =
+    props.gapX === "sm" ? "gap-4" : props.gapX === "lg" ? "gap-10" : "gap-8";
+
+  const alignItemsClass =
+    props.alignItems === "center"
+      ? "items-center"
+      : props.alignItems === "bottom"
+      ? "items-end"
+      : "items-start";
+
+  return {
+    backgroundClass,
+    paddingYClass,
+    maxWidthClass,
+    gapXClass,
+    alignItemsClass,
+  } as const;
+}
+
 // 에디터 크롬 없이 실제 랜딩 페이지처럼 블록들을 렌더링하는 컴포넌트
 interface PublicPageRendererProps {
   blocks: Block[];
@@ -77,6 +123,151 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
       );
     }
 
+    if (block.type === "formInput") {
+      const props = block.props as FormInputBlockProps;
+
+      // 정렬: 입력 필드의 textAlign 으로 매핑한다.
+      const align = props.align ?? "left";
+      const labelLayout = props.labelLayout ?? "stacked";
+      const widthMode = props.widthMode ?? (props.fullWidth ? "full" : "auto");
+
+      const wrapperLayoutClass =
+        labelLayout === "inline" ? "flex flex-row items-center gap-2" : "flex flex-col gap-1";
+
+      const baseInputClass =
+        "rounded border px-3 py-2 text-xs outline-none focus:border-sky-500";
+
+      const widthClass = widthMode === "full" ? "w-full" : "";
+
+      const inputStyle: CSSProperties = {
+        textAlign: align,
+      };
+
+      // 너비: fixed 모드일 때 widthPx 를 직접 사용한다.
+      if (widthMode === "fixed" && typeof props.widthPx === "number" && props.widthPx > 0) {
+        inputStyle.width = `${props.widthPx}px`;
+      }
+
+      // 타이포 관련 커스텀 값
+      if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+        inputStyle.fontSize = props.fontSizeCustom;
+      }
+      if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+        inputStyle.lineHeight = props.lineHeightCustom;
+      }
+      if (props.letterSpacingCustom && props.letterSpacingCustom.trim() !== "") {
+        inputStyle.letterSpacing = props.letterSpacingCustom;
+      }
+
+      // 색상 관련 커스텀 값
+      if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+        inputStyle.color = props.textColorCustom;
+      } else {
+        inputStyle.color = "#f9fafb";
+      }
+
+      if (props.fillColorCustom && props.fillColorCustom.trim() !== "") {
+        inputStyle.backgroundColor = props.fillColorCustom;
+      } else {
+        inputStyle.backgroundColor = "#020617"; // 기본 다크 배경과 유사한 색
+      }
+
+      if (props.strokeColorCustom && props.strokeColorCustom.trim() !== "") {
+        inputStyle.borderColor = props.strokeColorCustom;
+      } else {
+        inputStyle.borderColor = "#334155";
+      }
+
+      // 모서리 둥글기: borderRadius 토큰을 px 값으로 변환한다.
+      const radiusToken = props.borderRadius ?? "md";
+      const radiusPx =
+        radiusToken === "none" ? 0 : radiusToken === "sm" ? 2 : radiusToken === "lg" ? 6 : radiusToken === "full" ? 9999 : 4;
+      inputStyle.borderRadius = `${radiusPx}px`;
+
+      return (
+        <label key={block.id} className={`${wrapperLayoutClass} text-xs text-slate-200`}>
+          <span>{props.label}</span>
+          {props.inputType === "textarea" ? (
+            <textarea
+              className={`${baseInputClass} ${widthClass}`}
+              style={inputStyle}
+              placeholder={props.placeholder || props.label}
+            />
+          ) : (
+            <input
+              className={`${baseInputClass} ${widthClass}`}
+              style={inputStyle}
+              type={props.inputType === "email" ? "email" : "text"}
+              placeholder={props.placeholder || props.label}
+            />
+          )}
+        </label>
+      );
+    }
+
+    if (block.type === "formSelect") {
+      const props = block.props as FormSelectBlockProps;
+
+      return (
+        <label key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
+          <span>{props.label}</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-xs outline-none focus:border-sky-500"
+            defaultValue={props.options[0]?.value ?? ""}
+          >
+            {props.options.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      );
+    }
+
+    if (block.type === "formCheckbox") {
+      const props = block.props as FormCheckboxBlockProps;
+
+      return (
+        <div key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
+          <span>{props.groupLabel}</span>
+          <div className="flex flex-col gap-1">
+            {props.options.map((opt) => (
+              <label key={opt.value} className="inline-flex items-center gap-1">
+                <input
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-slate-700 bg-slate-900 text-sky-500"
+                />
+                <span>{opt.label}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    if (block.type === "formRadio") {
+      const props = block.props as FormRadioBlockProps;
+
+      return (
+        <div key={block.id} className="flex flex-col gap-1 text-xs text-slate-200">
+          <span>{props.groupLabel}</span>
+          <div className="flex flex-col gap-1">
+            {props.options.map((opt) => (
+              <label key={opt.value} className="inline-flex items-center gap-1">
+                <input
+                  type="radio"
+                  className="h-4 w-4 border-slate-700 bg-slate-900 text-sky-500"
+                  name={props.formFieldName}
+                />
+                <span>{opt.label}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
     if (block.type === "button") {
       const props = block.props as ButtonBlockProps;
 
@@ -91,6 +282,138 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
       );
     }
 
+    if (block.type === "divider") {
+      const props = block.props as DividerBlockProps;
+
+      const alignClass =
+        props.align === "center" ? "items-center" : props.align === "right" ? "items-end" : "items-start";
+
+      const thicknessClass = props.thickness === "medium" ? "h-[2px]" : "h-px";
+
+      const margin =
+        typeof props.marginYPx === "number"
+          ? props.marginYPx
+          : props.marginY === "sm"
+            ? 8
+            : props.marginY === "lg"
+              ? 24
+              : 16;
+
+      const dividerStyle: CSSProperties = {
+        backgroundColor:
+          props.colorHex && props.colorHex.trim() !== ""
+            ? props.colorHex
+            : "#475569", // 기본 slate 계열 색상
+      };
+
+      // 길이/너비: widthMode/widthPx 에 따라 조정한다.
+      const widthMode = props.widthMode ?? "full";
+      const innerStyle: CSSProperties = {};
+      let innerWidthClass = "w-full";
+
+      if (widthMode === "auto") {
+        innerWidthClass = "w-1/2";
+      } else if (widthMode === "fixed") {
+        innerWidthClass = "";
+        if (typeof props.widthPx === "number" && props.widthPx > 0) {
+          innerStyle.width = `${props.widthPx}px`;
+        } else {
+          innerStyle.width = "320px";
+        }
+      }
+
+      return (
+        <div
+          key={block.id}
+          className={`flex ${alignClass}`}
+          style={{ marginTop: margin, marginBottom: margin }}
+        >
+          <div className="max-w-xs" style={innerStyle}>
+            <div className={`${thicknessClass} ${innerWidthClass}`} style={dividerStyle} />
+          </div>
+        </div>
+      );
+    }
+
+    if (block.type === "list") {
+      const props = block.props as ListBlockProps;
+
+      const alignClass =
+        props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";
+
+      const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
+
+      const gapPx =
+        typeof props.gapYPx === "number"
+          ? props.gapYPx
+          : props.gapY === "sm"
+            ? 4
+            : props.gapY === "lg"
+              ? 16
+              : 8;
+
+      const listStyle: CSSProperties = {};
+      if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+        listStyle.fontSize = props.fontSizeCustom;
+      }
+      if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+        listStyle.lineHeight = props.lineHeightCustom;
+      }
+      if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+        listStyle.color = props.textColorCustom;
+      }
+
+      const bulletStyle = bulletStyleRaw;
+
+      const itemsTree: ListItemNode[] =
+        (props as any).itemsTree && (props as any).itemsTree.length > 0
+          ? ((props as any).itemsTree as ListItemNode[])
+          : props.items && props.items.length > 0
+            ? props.items.map((text, index) => ({
+                id: `${block.id}_item_${index + 1}`,
+                text,
+                children: [],
+              }))
+            : [
+                {
+                  id: `${block.id}_item_1`,
+                  text: "리스트 아이템 1",
+                  children: [],
+                },
+              ];
+
+      const renderListNodes = (nodes: ListItemNode[], level: number): React.ReactNode => {
+        const isOrderedLevel = bulletStyle === "decimal"; // 1단계에서는 전체 레벨 동일 스타일 사용
+        const ListTag = isOrderedLevel ? "ol" : "ul";
+
+        return (
+          <ListTag
+            className={alignClass}
+            style={{
+              ...listStyle,
+              listStyleType:
+                bulletStyle === "none"
+                  ? "none"
+                  : bulletStyle,
+              paddingLeft: 12 + level * 8,
+            }}
+          >
+            {nodes.map((node, index) => (
+              <li
+                key={node.id}
+                style={index < nodes.length - 1 ? { marginBottom: gapPx } : undefined}
+              >
+                {node.text}
+                {node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
+              </li>
+            ))}
+          </ListTag>
+        );
+      };
+
+      return renderListNodes(itemsTree, 0);
+    }
+
     if (block.type === "form") {
       const props = block.props as FormBlockProps;
 
@@ -364,17 +687,30 @@ export function PublicPageRenderer({ blocks }: PublicPageRendererProps) {
   const renderSection = (section: Block) => {
     const props = section.props as SectionBlockProps;
 
-    const bgClass =
-      props.background === "muted" ? "bg-slate-900" : props.background === "primary" ? "bg-sky-900" : "bg-slate-950";
-
-    const pyClass = props.paddingY === "sm" ? "py-8" : props.paddingY === "lg" ? "py-20" : "py-12";
+    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 sectionStyle: CSSProperties = {};
+    if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+      sectionStyle.backgroundColor = props.backgroundColorCustom;
+    }
+    if (typeof props.paddingYPx === "number" && props.paddingYPx > 0) {
+      sectionStyle.paddingTop = `${props.paddingYPx}px`;
+      sectionStyle.paddingBottom = `${props.paddingYPx}px`;
+    }
+
     return (
-      <section key={section.id} className={`${bgClass} ${pyClass}`}>
-        <div className="mx-auto max-w-5xl px-4">
-          <div className="flex gap-8">
+      <section key={section.id} className={`${backgroundClass} ${paddingYClass}`} style={sectionStyle}>
+        <div
+          className={`mx-auto ${maxWidthClass} px-4`}
+          style={{ maxWidth: typeof props.maxWidthPx === "number" && props.maxWidthPx > 0 ? `${props.maxWidthPx}px` : undefined }}
+        >
+          <div
+            className={`flex ${gapXClass} ${alignItemsClass}`}
+            style={{ columnGap: typeof props.gapXPx === "number" && props.gapXPx > 0 ? `${props.gapXPx}px` : undefined }}
+          >
             {columns.map((col) => {
               const basis = `${(col.span / 12) * 100}%`;
               const columnBlocks = blocks.filter((b) => b.sectionId === section.id && b.columnId === col.id);