1079 lines
37 KiB
TypeScript
1079 lines
37 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo, type CSSProperties } from "react";
|
|
import type {
|
|
Block,
|
|
TextBlockProps,
|
|
ButtonBlockProps,
|
|
ImageBlockProps,
|
|
VideoBlockProps,
|
|
SectionBlockProps,
|
|
DividerBlockProps,
|
|
ListBlockProps,
|
|
ListItemNode,
|
|
FormBlockProps,
|
|
FormInputBlockProps,
|
|
FormSelectBlockProps,
|
|
FormCheckboxBlockProps,
|
|
FormRadioBlockProps,
|
|
FormSelectOption,
|
|
FormRadioOption,
|
|
FormCheckboxOption,
|
|
} from "@/features/editor/state/editorStore";
|
|
import {
|
|
normalizeVideoSourceUrl,
|
|
resolveVideoPlatform,
|
|
buildVideoEmbedUrl,
|
|
computeVideoPublicTokens,
|
|
} from "@/features/editor/utils/videoHelpers";
|
|
import { computeButtonPublicTokens, computeButtonPbTokens } from "@/features/editor/utils/buttonHelpers";
|
|
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, computeSectionExportTokens } from "@/features/editor/utils/sectionHelpers";
|
|
import {
|
|
computeFormInputPublicTokens,
|
|
computeFormSelectPublicTokens,
|
|
computeFormCheckboxPublicTokens,
|
|
computeFormRadioPublicTokens,
|
|
computeFormControllerPublicTokens,
|
|
} from "@/features/editor/utils/formHelpers";
|
|
|
|
// 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸
|
|
// (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.)
|
|
export function getSectionLayoutConfig(props: SectionBlockProps) {
|
|
const backgroundClass =
|
|
props.background === "muted"
|
|
? "bg-slate-900"
|
|
: props.background === "primary"
|
|
? "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-4" : props.paddingY === "lg" ? "py-10" : "py-6";
|
|
|
|
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[];
|
|
projectSlug?: string;
|
|
}
|
|
|
|
const pxToEm = (px: number, base = 16) => `${px / base}em`;
|
|
|
|
const convertPxStringToEm = (value?: string | null) => {
|
|
if (!value) return null;
|
|
const match = value.trim().match(/-?\d+(?:\.\d+)?/);
|
|
if (!match) return null;
|
|
const px = parseFloat(match[0]);
|
|
if (!Number.isFinite(px)) return null;
|
|
return pxToEm(px);
|
|
};
|
|
|
|
export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererProps) {
|
|
const sectionBlocks = blocks.filter((b) => b.type === "section");
|
|
const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
|
|
|
|
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 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={className} style={textStyle}>
|
|
{props.text}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
if (block.type === "formInput") {
|
|
const props = block.props as FormInputBlockProps;
|
|
const tokens = computeFormInputPublicTokens(props);
|
|
const isRequired = requiredFieldIdSet.has(block.id);
|
|
|
|
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={wrapperClassName}
|
|
style={tokens.wrapperStyle}
|
|
>
|
|
{labelSpan}
|
|
{props.inputType === "textarea" ? (
|
|
<textarea
|
|
data-testid="preview-form-input"
|
|
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={`pb-input ${tokens.widthClass}`}
|
|
style={tokens.inputStyle}
|
|
type={props.inputType === "email" ? "email" : "text"}
|
|
name={props.formFieldName}
|
|
required={isRequired}
|
|
placeholder={props.placeholder || props.label}
|
|
/>
|
|
)}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
if (block.type === "formSelect") {
|
|
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={wrapperClassName} style={wrapperStyle}>
|
|
{labelSpan}
|
|
<div
|
|
data-testid="preview-form-select"
|
|
className={`${tokens.widthClass}`}
|
|
style={tokens.wrapperStyle}
|
|
>
|
|
<select
|
|
className="pb-select"
|
|
style={tokens.selectStyle}
|
|
name={props.formFieldName}
|
|
required={isRequired}
|
|
defaultValue={props.options[0]?.value ?? ""}
|
|
>
|
|
{props.options.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
if (block.type === "formCheckbox") {
|
|
const props = block.props as FormCheckboxBlockProps;
|
|
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={[layoutClass, baseClass].filter(Boolean).join(" ")}
|
|
style={groupStyle}
|
|
>
|
|
{groupLabelMode === "image" && props.groupLabelImageUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={props.groupLabelImageUrl}
|
|
alt={props.groupLabel || "폼 그룹 타이틀"}
|
|
className="inline-block max-w-full h-auto"
|
|
style={tokens.groupTextStyle}
|
|
/>
|
|
) : (
|
|
groupLabelSpan
|
|
)}
|
|
<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="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
|
|
<img
|
|
src={opt.labelImageUrl}
|
|
alt={opt.label || props.groupLabel || "체크박스 옵션"}
|
|
className="inline-block max-w-full h-auto"
|
|
style={tokens.optionTextStyle}
|
|
/>
|
|
) : (
|
|
<span data-testid="preview-form-checkbox-option" style={tokens.optionTextStyle}>
|
|
{opt.label}
|
|
</span>
|
|
)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (block.type === "formRadio") {
|
|
const props = block.props as FormRadioBlockProps;
|
|
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={[layoutClass, baseClass].filter(Boolean).join(" ")}
|
|
style={groupStyle}
|
|
>
|
|
{groupLabelMode === "image" && props.groupLabelImageUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={props.groupLabelImageUrl}
|
|
alt={props.groupLabel || "폼 그룹 타이틀"}
|
|
className="inline-block max-w-full h-auto"
|
|
style={tokens.groupTextStyle}
|
|
/>
|
|
) : (
|
|
groupLabelSpan
|
|
)}
|
|
<div
|
|
className={optionsLayoutClass}
|
|
data-testid="preview-form-radio-options"
|
|
style={tokens.optionsStyle}
|
|
>
|
|
{props.options.map((opt, index) => (
|
|
<label
|
|
key={opt.value}
|
|
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
|
|
<img
|
|
src={opt.labelImageUrl}
|
|
alt={opt.label || props.groupLabel || "라디오 옵션"}
|
|
className="inline-block max-w-full h-auto"
|
|
style={tokens.optionTextStyle}
|
|
/>
|
|
) : (
|
|
<span data-testid="preview-form-radio-option" style={tokens.optionTextStyle}>
|
|
{opt.label}
|
|
</span>
|
|
)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (block.type === "button") {
|
|
const props = block.props as ButtonBlockProps;
|
|
|
|
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(" ");
|
|
|
|
const hasImage = typeof (props as any).imageSrc === "string" && (props as any).imageSrc.trim() !== "";
|
|
const placement = ((props as any).imagePlacement as string | undefined) ?? "left";
|
|
|
|
let innerContent: React.ReactNode;
|
|
if (!hasImage) {
|
|
innerContent = props.label;
|
|
} else {
|
|
const src = (props as any).imageSrc as string;
|
|
const altRaw = (props as any).imageAlt as string | undefined;
|
|
const alt = altRaw && altRaw.trim() !== "" ? altRaw.trim() : props.label;
|
|
|
|
const imgEl = (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={src} alt={alt} className="inline-block max-w-full h-auto" />
|
|
);
|
|
|
|
const labelSpan = <span className="whitespace-pre-wrap">{props.label}</span>;
|
|
const isVertical = placement === "top" || placement === "bottom";
|
|
const wrapperClassNames = [
|
|
"inline-flex",
|
|
"items-center",
|
|
"gap-2",
|
|
isVertical ? "flex-col" : "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
|
|
const first = placement === "left" || placement === "top" ? imgEl : labelSpan;
|
|
const second = placement === "left" || placement === "top" ? labelSpan : imgEl;
|
|
|
|
innerContent = (
|
|
<span className={wrapperClassNames}>
|
|
{first}
|
|
{second}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
if (block.type === "divider") {
|
|
const props = block.props as DividerBlockProps;
|
|
const tokens = computeDividerPublicTokens(props);
|
|
|
|
return (
|
|
<div
|
|
key={block.id}
|
|
data-testid="preview-divider"
|
|
className={`flex w-full ${tokens.alignClass}`}
|
|
style={{ marginTop: tokens.wrapperMarginEm, marginBottom: tokens.wrapperMarginEm }}
|
|
>
|
|
<div className={tokens.innerWidthClass} style={tokens.innerStyle}>
|
|
<div
|
|
data-testid="preview-divider-line"
|
|
className={tokens.thicknessClass}
|
|
style={tokens.lineStyle}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (block.type === "list") {
|
|
const props = block.props as ListBlockProps;
|
|
const tokens = computeListPublicTokens(props);
|
|
|
|
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 = tokens.bulletStyle === "decimal";
|
|
const ListTag = isOrderedLevel ? "ol" : "ul";
|
|
|
|
return (
|
|
<ListTag
|
|
className={`pb-list ${tokens.alignClass}`}
|
|
style={{
|
|
...tokens.listStyle,
|
|
listStyleType:
|
|
tokens.bulletStyle === "none"
|
|
? "none"
|
|
: tokens.bulletStyle,
|
|
}}
|
|
>
|
|
{nodes.map((node, index) => (
|
|
<li
|
|
key={node.id}
|
|
style={index < nodes.length - 1 ? { marginBottom: `${tokens.gapEm}em` } : undefined}
|
|
>
|
|
{node.text}
|
|
{node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
|
|
</li>
|
|
))}
|
|
</ListTag>
|
|
);
|
|
};
|
|
|
|
return renderListNodes(itemsTree, 0);
|
|
}
|
|
|
|
if (block.type === "video") {
|
|
const props = block.props as VideoBlockProps;
|
|
const rawUrl = normalizeVideoSourceUrl(props.sourceUrl ?? "");
|
|
|
|
if (!rawUrl) {
|
|
return null;
|
|
}
|
|
|
|
const platform = resolveVideoPlatform(rawUrl, props.platform ?? "auto");
|
|
const embedUrl = buildVideoEmbedUrl(rawUrl, platform, { enableVimeoEmbed: true });
|
|
|
|
const tokens = computeVideoPublicTokens(props);
|
|
|
|
const startTimeSec =
|
|
typeof (props as any).startTimeSec === "number" && (props as any).startTimeSec >= 0
|
|
? (props as any).startTimeSec
|
|
: null;
|
|
const endTimeSec =
|
|
typeof (props as any).endTimeSec === "number" && (props as any).endTimeSec >= 0
|
|
? (props as any).endTimeSec
|
|
: null;
|
|
|
|
const isEmbed = platform === "youtube" || platform === "vimeo";
|
|
|
|
return (
|
|
<div key={block.id} className={`w-full flex ${tokens.justifyClass}`}>
|
|
<div>
|
|
<div className={`pb-video-wrapper${tokens.aspectClass}`} style={tokens.wrapperStyle}>
|
|
{isEmbed ? (
|
|
<iframe
|
|
title={props.titleText && props.titleText.trim() !== "" ? props.titleText.trim() : "비디오"}
|
|
src={embedUrl}
|
|
className="pb-video-frame"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
/>
|
|
) : (
|
|
<video
|
|
data-testid="preview-video"
|
|
className="pb-video-frame"
|
|
src={rawUrl}
|
|
style={tokens.videoStyle}
|
|
poster={props.posterImageSrc && props.posterImageSrc.trim() !== "" ? props.posterImageSrc.trim() : undefined}
|
|
aria-label={props.ariaLabel && props.ariaLabel.trim() !== "" ? props.ariaLabel.trim() : undefined}
|
|
onLoadedMetadata={(event) => {
|
|
if (startTimeSec != null) {
|
|
const el = event.currentTarget;
|
|
try {
|
|
el.currentTime = startTimeSec;
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
}}
|
|
onTimeUpdate={(event) => {
|
|
if (endTimeSec != null) {
|
|
const el = event.currentTarget;
|
|
if (el.currentTime >= endTimeSec) {
|
|
el.pause();
|
|
try {
|
|
if (!Number.isNaN(endTimeSec)) {
|
|
el.currentTime = endTimeSec;
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
}
|
|
}}
|
|
controls={props.controls !== false}
|
|
autoPlay={!!props.autoplay}
|
|
loop={!!props.loop}
|
|
muted={!!props.muted}
|
|
/>
|
|
)}
|
|
</div>
|
|
{props.captionText && props.captionText.trim() !== "" && (
|
|
<p data-testid="preview-video-caption" className="pb-video-caption">
|
|
{props.captionText}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (block.type === "form") {
|
|
return null;
|
|
}
|
|
|
|
if (block.type === "image") {
|
|
const props = block.props as ImageBlockProps;
|
|
const tokens = computeImagePublicTokens(props);
|
|
|
|
const rawSrc = typeof props.src === "string" ? props.src.trim() : "";
|
|
const hasSrc = rawSrc !== "";
|
|
|
|
return (
|
|
<div key={block.id} className={`w-full flex ${tokens.alignClass}`} style={tokens.wrapperStyle}>
|
|
{hasSrc && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={rawSrc} alt={props.alt} className="object-contain" style={tokens.imageStyle} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const renderSection = (section: Block) => {
|
|
const props = section.props as SectionBlockProps;
|
|
|
|
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={exportTokens.sectionClasses}
|
|
style={tokens.sectionStyle}
|
|
>
|
|
{tokens.hasBackgroundVideo && tokens.backgroundVideoSrc && (
|
|
<video
|
|
data-testid="preview-section-bg-video"
|
|
className="pb-section-bg-video"
|
|
src={tokens.backgroundVideoSrc}
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
/>
|
|
)}
|
|
<div
|
|
data-testid="preview-section-inner"
|
|
className="pb-section-inner"
|
|
style={tokens.innerWrapperStyle}
|
|
>
|
|
<div
|
|
data-testid="preview-section-columns"
|
|
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="pb-section-column"
|
|
style={{ flexBasis: basis, display: "flex", flexDirection: "column", rowGap: "1rem" }}
|
|
>
|
|
{columnBlocks.map((b) => (
|
|
<div key={b.id}>{renderBlock(b)}</div>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col text-slate-50">
|
|
{/* 루트 텍스트/버튼/이미지 블록들이 있다면 pb-root 내에 페이지 상단에 노출 */}
|
|
{rootBlocks.length > 0 && (
|
|
<section className="pb-root">
|
|
<div className="pb-root-inner">
|
|
{rootBlocks.map((b) => (
|
|
<div key={b.id}>{renderBlock(b)}</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* 섹션 블록들 */}
|
|
{sectionBlocks.map((section) => renderSection(section))}
|
|
</div>
|
|
);
|
|
}
|