74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
export function createCtaTemplateBlocks(opts: {
|
|
sectionId: string;
|
|
createId: () => string;
|
|
}): { blocks: Block[]; lastSelectedId: string } {
|
|
const { sectionId, createId } = opts;
|
|
|
|
const columns: SectionBlockProps["columns"] = [
|
|
{ id: `${sectionId}_col_1`, span: 12 },
|
|
];
|
|
|
|
const sectionProps: SectionBlockProps = {
|
|
background: "primary",
|
|
paddingY: "md",
|
|
// CTA 는 강한 색상과 적당한 여백, 비교적 좁은 폭을 사용한다.
|
|
paddingYPx: 64,
|
|
maxWidthPx: 960,
|
|
gapXPx: 24,
|
|
backgroundColorCustom: "#0c4a6e",
|
|
columns,
|
|
} as any;
|
|
|
|
const sectionBlock: Block = {
|
|
id: sectionId,
|
|
type: "section",
|
|
props: sectionProps,
|
|
sectionId: null,
|
|
columnId: null,
|
|
};
|
|
|
|
const firstColumnId = `${sectionId}_col_1`;
|
|
|
|
const textId = createId();
|
|
const textProps: TextBlockProps = {
|
|
text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.",
|
|
align: "center",
|
|
size: "base",
|
|
} as any;
|
|
const textBlock: Block = {
|
|
id: textId,
|
|
type: "text",
|
|
props: textProps,
|
|
sectionId,
|
|
columnId: firstColumnId,
|
|
};
|
|
|
|
const buttonId = createId();
|
|
const buttonProps: ButtonBlockProps = {
|
|
label: "CTA 버튼",
|
|
href: "#",
|
|
align: "center",
|
|
size: "md",
|
|
variant: "solid",
|
|
colorPalette: "primary",
|
|
fullWidth: false,
|
|
borderRadius: "md",
|
|
};
|
|
const buttonBlock: Block = {
|
|
id: buttonId,
|
|
type: "button",
|
|
props: buttonProps,
|
|
sectionId,
|
|
columnId: firstColumnId,
|
|
};
|
|
|
|
const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];
|
|
const lastSelectedId = buttonId;
|
|
|
|
return { blocks, lastSelectedId };
|
|
}
|