jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

비디오 태그 및 폼 블록 정리
CI / test (push) Failing after 7m30s
Details
CI / pr_and_merge (push) Has been skipped
Details

Browse Source
This commit is contained in:
Jaybe
2025-11-27 19:37:32 +09:00
parent 1405280ed3
commit c5c9d17e8b
50 changed files with 365 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/export/route.ts
+42 -98
View File
@@ -160,6 +160,23 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const sectionBlocks = blocks.filter((b) => b.type === "section");
const rootBlocks = blocks.filter((b) => !b.sectionId && b.type !== "section");
// Form 컨트롤러(FormBlock)와 개별 필드 블록(formInput/formSelect/...) 를 연결하기 위한 맵.
// - key: 필드 블록 id (fieldIds 에 포함된 id)
// - value: 해당 필드가 속한 <form> 요소의 DOM id (예: form_form_1)
const fieldIdToFormId = new Map<string, string>();
for (const block of blocks) {
if (block.type !== "form") continue;
const props = (block.props ?? {}) as FormBlockProps;
const fieldIds = Array.isArray(props.fieldIds) ? props.fieldIds : [];
if (fieldIds.length === 0) continue;
const formDomId = `form_${block.id}`;
for (const fieldId of fieldIds) {
if (typeof fieldId === "string" && fieldId.trim() !== "") {
fieldIdToFormId.set(fieldId, formDomId);
}
}
}
const renderBlock = (block: Block): string => {
if (block.type === "text") {
const props = (block.props ?? {}) as TextBlockProps;
@@ -316,107 +333,24 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const props = (block.props ?? {}) as FormBlockProps;
const tokens = computeFormBlockExportTokens(block, blocks);
const controllerFields = tokens.hasControllerFields ? tokens.controllerFields : [];
const fallbackFields = tokens.fallbackFields;
const hasControllerFields = controllerFields.length > 0;
const hasFallbackFields = fallbackFields.length > 0;
// FormBlock 이 컨트롤러/필드 정보를 전혀 가지고 있지 않으면 정적 HTML 에서는 아무 것도 렌더하지 않는다.
if (!hasControllerFields && !hasFallbackFields) {
// FormBlock 이 컨트롤러 필드 정보를 전혀 가지고 있지 않으면
// Export 레이어에서는 아무 것도 렌더하지 않는다 (fallback fields 기반 pb-form 도 생성하지 않음).
if (!hasControllerFields) {
return "";
}
const formParts: string[] = [];
const formStyleAttr = tokens.formStyleParts.length > 0 ? ` style="${tokens.formStyleParts.join(";")}"` : "";
// 컨트롤러 전용 FormBlock: fieldIds 기반으로 개별 필드 블록과 연결되는 순수 컨트롤러 폼만 생성한다.
// - Export 에서는 레이아웃/스타일을 가지지 않고, id/메서드만 가지는 최소한의 <form> 요소만 만든다.
const formId = `form_${block.id}`;
const method = props.method ?? "POST";
const methodAttr = ` method="${method.toLowerCase()}"`;
formParts.push(`<form class="pb-form" method="post"${formStyleAttr}>`);
if (hasControllerFields) {
for (const fieldBlock of controllerFields) {
const anyProps: any = fieldBlock.props ?? {};
const name = typeof anyProps.formFieldName === "string" ? anyProps.formFieldName : fieldBlock.id;
const label =
typeof anyProps.label === "string" || typeof anyProps.groupLabel === "string"
? (anyProps.label ?? anyProps.groupLabel)
: name;
const textColorRaw =
typeof anyProps.textColorCustom === "string" && anyProps.textColorCustom.trim() !== ""
? anyProps.textColorCustom.trim()
: "";
const labelStyleAttr = textColorRaw ? ` style="color:${escapeAttr(textColorRaw)}"` : "";
const fieldTextStyleAttr = textColorRaw ? ` style="color:${escapeAttr(textColorRaw)}"` : "";
formParts.push(`<div class="pb-form-field">`);
formParts.push(`<label class="pb-form-label"${labelStyleAttr}>${escapeHtml(label ?? "")}</label>`);
if (fieldBlock.type === "formInput") {
const type = anyProps.inputType === "email" ? "email" : "text";
const required = anyProps.required ? " required" : "";
formParts.push(
`<input class="pb-input" type="${type}" name="${escapeAttr(name)}" placeholder="${escapeAttr(
label ?? "",
)}"${required}${fieldTextStyleAttr} />`,
);
} else if (fieldBlock.type === "formSelect") {
const required = anyProps.required ? " required" : "";
const options: FormSelectOption[] = Array.isArray(anyProps.options) ? anyProps.options : [];
formParts.push(`<select class="pb-select" name="${escapeAttr(name)}"${required}${fieldTextStyleAttr}>`);
for (const opt of options) {
formParts.push(
`<option value="${escapeAttr(opt.value)}">${escapeHtml(opt.label)}</option>`,
);
}
formParts.push(`</select>`);
} else if (fieldBlock.type === "formCheckbox") {
const options = Array.isArray(anyProps.options) ? anyProps.options : [];
for (const opt of options) {
formParts.push(
`<label class="pb-form-option"${fieldTextStyleAttr}><input type="checkbox" name="${escapeAttr(
name,
)}" value="${escapeAttr(opt.value)}" /> ${escapeHtml(opt.label)}</label>`,
);
}
} else if (fieldBlock.type === "formRadio") {
const options = Array.isArray(anyProps.options) ? anyProps.options : [];
for (const opt of options) {
formParts.push(
`<label class="pb-form-option"${fieldTextStyleAttr}><input type="radio" name="${escapeAttr(
name,
)}" value="${escapeAttr(opt.value)}" /> ${escapeHtml(opt.label)}</label>`,
);
}
}
formParts.push(`</div>`);
}
} else if (hasFallbackFields) {
for (const field of fallbackFields) {
const required = field.required ? " required" : "";
const label = field.label ?? field.name;
formParts.push(`<div class="pb-form-field">`);
formParts.push(`<label class="pb-form-label">${escapeHtml(label)}</label>`);
if (field.type === "textarea") {
formParts.push(
`<textarea class="pb-textarea" name="${escapeAttr(field.name)}" placeholder="${escapeAttr(
label,
)}"${required}></textarea>`,
);
} else {
formParts.push(
`<input class="pb-input" type="${field.type}" name="${escapeAttr(
field.name,
)}" placeholder="${escapeAttr(label)}"${required} />`,
);
}
formParts.push(`</div>`);
}
}
formParts.push(`<button type="submit" class="pb-btn-base pb-btn-size-md pb-btn-variant-solid-primary">제출</button>`);
formParts.push(`</form>`);
return formParts.join("");
const parts: string[] = [];
parts.push(`<form id="${escapeAttr(formId)}" class="pb-form-controller"${methodAttr}></form>`);
return parts.join("");
}
if (block.type === "divider") {
@@ -449,13 +383,15 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const required = props.required ? " required" : "";
const tokens = computeFormInputExportTokens(props, { escapeAttr });
const formId = fieldIdToFormId.get(block.id);
const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
return [
'<div class="pb-form-field">',
`<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`,
`<input class="pb-input" type="${type}" name="${escapeAttr(name)}" placeholder="${escapeAttr(
label,
)}"${required}${tokens.inputStyleAttr} />`,
)}"${required}${tokens.inputStyleAttr}${formAttr} />`,
"</div>",
].join("");
}
@@ -469,11 +405,15 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const options: FormSelectOption[] = Array.isArray(props.options) ? props.options : [];
const tokens = computeFormSelectExportTokens(props, { escapeAttr });
const formId = fieldIdToFormId.get(block.id);
const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
const parts: string[] = [];
parts.push('<div class="pb-form-field">');
parts.push(`<label class="pb-form-label"${tokens.labelStyleAttr}>${escapeHtml(label)}</label>`);
parts.push(`<select class="pb-select" name="${escapeAttr(name)}"${required}${tokens.selectStyleAttr}>`);
parts.push(
`<select class="pb-select" name="${escapeAttr(name)}"${required}${tokens.selectStyleAttr}${formAttr}>`,
);
for (const opt of options) {
parts.push(
`<option value="${escapeAttr(opt.value)}">${escapeHtml(opt.label)}</option>`,
@@ -495,6 +435,8 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const options = Array.isArray(props.options) ? props.options : [];
const tokens = computeFormCheckboxExportTokens(props, { escapeAttr });
const formId = fieldIdToFormId.get(block.id);
const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
const parts: string[] = [];
parts.push('<div class="pb-form-field">');
@@ -503,7 +445,7 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
parts.push(
`<label class="pb-form-option"${tokens.optionStyleAttr}><input type="checkbox" name="${escapeAttr(
name,
)}" value="${escapeAttr(opt.value)}" /> ${escapeHtml(opt.label)}</label>`,
)}" value="${escapeAttr(opt.value)}"${formAttr} /> ${escapeHtml(opt.label)}</label>`,
);
}
parts.push("</div>");
@@ -521,6 +463,8 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
const options = Array.isArray(props.options) ? props.options : [];
const tokens = computeFormRadioExportTokens(props, { escapeAttr });
const formId = fieldIdToFormId.get(block.id);
const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
const parts: string[] = [];
parts.push('<div class="pb-form-field">');
@@ -529,7 +473,7 @@ export const buildStaticHtml = (blocks: Block[], projectConfig?: ProjectConfig):
parts.push(
`<label class="pb-form-option"${tokens.optionStyleAttr}><input type="radio" name="${escapeAttr(
name,
)}" value="${escapeAttr(opt.value)}" /> ${escapeHtml(opt.label)}</label>`,
)}" value="${escapeAttr(opt.value)}"${formAttr} /> ${escapeHtml(opt.label)}</label>`,
);
}
parts.push("</div>");