Files
page-builder/src/app/editor/templates/blogTemplate.ts
T
jaybe 546c961a31
CI / test (push) Failing after 6m10s
CI / pr_and_merge (push) Has been skipped
섹션 레이아웃 및 템플릿 스타일 개선
2025-11-21 16:25:55 +09:00

84 lines
2.2 KiB
TypeScript

"use client";
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
export function createBlogTemplateBlocks(opts: {
sectionId: string;
createId: () => string;
}): { blocks: Block[]; lastSelectedId: string } {
const { sectionId, createId } = opts;
const columns: SectionBlockProps["columns"] = [
{ id: `${sectionId}_col_1`, span: 4 },
{ id: `${sectionId}_col_2`, span: 4 },
{ id: `${sectionId}_col_3`, span: 4 },
];
const sectionProps: SectionBlockProps = {
background: "default",
paddingY: "lg",
// 블로그 리스트는 넓은 폭과 충분한 카드 간격을 사용한다.
paddingYPx: 72,
maxWidthPx: 1120,
gapXPx: 32,
backgroundColorCustom: "#020617",
columns,
} as any;
const sectionBlock: Block = {
id: sectionId,
type: "section",
props: sectionProps,
sectionId: null,
columnId: null,
};
const postDefinitions = [
{ title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
{ title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
{ title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
];
const blogBlocks: Block[] = columns.flatMap((col, index) => {
const post = postDefinitions[index] ?? postDefinitions[0];
const titleId = createId();
const summaryId = createId();
const titleProps: TextBlockProps = {
text: post.title,
align: "left",
size: "lg",
} as any;
const summaryProps: TextBlockProps = {
text: post.summary,
align: "left",
size: "sm",
} as any;
const titleBlock: Block = {
id: titleId,
type: "text",
props: titleProps,
sectionId,
columnId: col.id,
};
const summaryBlock: Block = {
id: summaryId,
type: "text",
props: summaryProps,
sectionId,
columnId: col.id,
};
return [titleBlock, summaryBlock];
});
const blocks: Block[] = [sectionBlock, ...blogBlocks];
const lastSelectedId = blogBlocks[blogBlocks.length - 1]?.id ?? sectionId;
return { blocks, lastSelectedId };
}