})
`;
}
if (block.type === "form") {
const props = (block.props ?? {}) as FormBlockProps;
const tokens = computeFormBlockExportTokens(block, blocks);
const controllerFields = tokens.hasControllerFields ? tokens.controllerFields : [];
const hasControllerFields = controllerFields.length > 0;
// FormBlock 이 컨트롤러 필드 정보를 전혀 가지고 있지 않으면
// Export 레이어에서는 아무 것도 렌더하지 않는다 (fallback fields 기반 pb-form 도 생성하지 않음).
if (!hasControllerFields) {
return "";
}
// 컨트롤러 전용 FormBlock: fieldIds 기반으로 개별 필드 블록과 연결되는 순수 컨트롤러 폼만 생성한다.
// - Export 에서는 레이아웃/스타일 대신 id/메서드/액션만 가지는 최소한의 ");
return parts.join("");
}
if (block.type === "divider") {
const props: any = block.props ?? {};
const tokens = computeDividerExportTokens(props, { escapeAttr });
return `
`;
}
if (block.type === "list") {
const props = (block.props ?? {}) as ListBlockProps;
const tokens = computeListExportTokens(props);
if (tokens.items.length === 0) {
return "";
}
const lis = tokens.items.map((text) => `${escapeHtml(text)}`).join("");
const listStyleAttr = tokens.listStyleParts.join(";");
return `<${tokens.Tag} class="pb-list" style="${listStyleAttr}">${lis}`;
}
if (block.type === "formInput") {
const props: any = block.props ?? {};
const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
const label =
typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
const type = props.inputType === "email" ? "email" : "text";
const required = props.required ? " required" : "";
const tokens = computeFormInputExportTokens(props, { escapeAttr });
const formId = fieldIdToFormId.get(block.id);
const formAttr = formId ? ` form="${escapeAttr(formId)}"` : "";
return [
'',
``,
``,
"
",
].join("");
}
if (block.type === "formSelect") {
const props: any = block.props ?? {};
const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
const label =
typeof props.label === "string" && props.label.trim() !== "" ? props.label : name;
const required = props.required ? " required" : "";
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('');
parts.push(``);
parts.push(
`");
parts.push("
");
return parts.join("");
}
if (block.type === "formCheckbox") {
const props: any = block.props ?? {};
const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
const label =
typeof props.groupLabel === "string" && props.groupLabel.trim() !== ""
? props.groupLabel
: name;
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('');
parts.push(``);
for (const opt of options) {
parts.push(
``,
);
}
parts.push("
");
return parts.join("");
}
if (block.type === "formRadio") {
const props: any = block.props ?? {};
const name = typeof props.formFieldName === "string" ? props.formFieldName : block.id;
const label =
typeof props.groupLabel === "string" && props.groupLabel.trim() !== ""
? props.groupLabel
: name;
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('');
parts.push(``);
for (const opt of options) {
parts.push(
``,
);
}
parts.push("
");
return parts.join("");
}
return "";
};
const bodyParts: string[] = [];
if (rootBlocks.length > 0) {
bodyParts.push('');
for (const block of rootBlocks) {
bodyParts.push(renderBlock(block));
}
bodyParts.push("
");
}
for (const section of sectionBlocks) {
const props = (section.props ?? {}) as SectionBlockProps;
const columns =
Array.isArray(props.columns) && props.columns.length > 0
? props.columns
: [{ id: `${section.id}_col`, span: 12 }];
const tokens = computeSectionExportTokens(props);
const sectionStyleAttr =
tokens.sectionStyleParts.length > 0 ? ` style="${tokens.sectionStyleParts.join(";")}"` : "";
bodyParts.push(
`${tokens.backgroundVideoHtml}`,
);
for (const column of columns) {
const columnBlocks = blocks.filter(
(b) => b.sectionId === section.id && b.columnId === column.id,
);
bodyParts.push('
');
for (const block of columnBlocks) {
bodyParts.push(renderBlock(block));
}
bodyParts.push("
");
}
bodyParts.push("
${bodyContent}
${trackingHtml}
`;
};
export async function POST(request: Request) {
let body: ExportRequestBody;
try {
body = (await request.json()) as ExportRequestBody;
} catch {
return NextResponse.json({ message: "잘못된 JSON 요청입니다." }, { status: 400 });
}
const blocks = Array.isArray(body.blocks) ? body.blocks : [];
const projectConfig = body.projectConfig;
let html = buildStaticHtml(blocks, projectConfig);
const zip = new JSZip();
const imageIds = new Set();
const imageRegex = /\/api\/image\/([^"'>\s)]+)/g;
let match: RegExpExecArray | null;
// eslint-disable-next-line no-cond-assign
while ((match = imageRegex.exec(html)) !== null) {
if (match[1]) {
imageIds.add(match[1]);
}
}
for (const id of imageIds) {
const filePath = path.join(UPLOAD_DIR, id);
try {
const bytes = await fs.readFile(filePath);
zip.file(`images/${id}`, bytes);
const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const srcRegex = new RegExp(`/api/image/${escapedId}`, "g");
html = html.replace(srcRegex, `./images/${id}`);
} catch {
// 업로드 디렉터리에 파일이 없는 경우에는 조용히 건너뛴다.
}
}
const videoIds = new Set();
const videoRegex = /\/api\/video\/([^"'>\s]+)/g;
let videoMatch: RegExpExecArray | null;
// eslint-disable-next-line no-cond-assign
while ((videoMatch = videoRegex.exec(html)) !== null) {
if (videoMatch[1]) {
videoIds.add(videoMatch[1]);
}
}
for (const id of videoIds) {
const filePath = path.join(UPLOAD_DIR, id);
try {
const bytes = await fs.readFile(filePath);
zip.file(`videos/${id}`, bytes);
const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const srcRegex = new RegExp(`/api/video/${escapedId}`, "g");
html = html.replace(srcRegex, `./videos/${id}`);
} catch {
// 업로드 디렉터리에 파일이 없는 경우에는 조용히 건너뛴다.
}
}
zip.file("index.html", html);
try {
const cssContent = await fs.readFile(BUILDER_CSS_PATH, "utf8");
zip.file("builder.css", cssContent);
} catch {
// CSS 파일이 없어도 내보내기가 가능하도록 한다.
zip.file("builder.css", "/* builder.css 를 찾을 수 없습니다. */\n");
}
const mainJs = [
"(function(){",
" function pbInitFormControllers(){",
" var forms = document.querySelectorAll(\"form.pb-form-controller\");",
" if (!forms || !forms.length) { return; }",
" forms.forEach(function(form){",
" form.addEventListener(\"submit\", function(event){",
" if (!form) { return; }",
" if (event && typeof event.preventDefault === 'function') { event.preventDefault(); }",
" var formData = new FormData(form);",
" var configInput = form.querySelector('input[name=\"__config\"]');",
" var config = null;",
" if (configInput && configInput.value) {",
" try { config = JSON.parse(configInput.value); } catch (e) { config = null; }",
" }",
" var action = form.getAttribute('action') || '/api/forms/submit';",
" fetch(action, { method: 'POST', body: formData })",
" .then(function(res){ return res.json().catch(function(){ return {}; }); })",
" .then(function(data){",
" var ok = data && data.ok;",
" var message = data && data.message;",
" if (ok) {",
" var success = message || (config && config.successMessage) || '성공적으로 전송되었습니다.';",
" if (typeof alert === 'function') { alert(success); }",
" try { form.reset(); } catch (e) {}",
" } else {",
" var errorMsg = message || (config && config.errorMessage) || '전송 중 오류가 발생했습니다.';",
" if (typeof alert === 'function') { alert(errorMsg); }",
" }",
" })",
" .catch(function(){",
" var errorMsg = (config && config.errorMessage) || '전송 중 오류가 발생했습니다.';",
" if (typeof alert === 'function') { alert(errorMsg); }",
" });",
" });",
" });",
" }",
" if (typeof document !== 'undefined') {",
" if (document.readyState === 'loading') {",
" document.addEventListener('DOMContentLoaded', pbInitFormControllers);",
" } else {",
" pbInitFormControllers();",
" }",
" }",
" console.log('Page Builder static export loaded');",
"})();",
].join("\n");
zip.file("main.js", mainJs);
const zipArrayBuffer = await zip.generateAsync({ type: "arraybuffer" });
return new NextResponse(zipArrayBuffer, {
status: 200,
headers: {
"Content-Type": "application/zip",
"Content-Disposition": `attachment; filename=page-builder-export.zip`,
},
});
}