84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
export function createPricingTemplateBlocks(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: "muted",
|
|
paddingY: "lg",
|
|
// 요금제는 꽤 넓은 여백과 넓은 최대 폭, 넉넉한 컬럼 간격을 사용한다.
|
|
paddingYPx: 88,
|
|
maxWidthPx: 1120,
|
|
gapXPx: 40,
|
|
backgroundColorCustom: "#0f172a",
|
|
columns,
|
|
} as any;
|
|
|
|
const sectionBlock: Block = {
|
|
id: sectionId,
|
|
type: "section",
|
|
props: sectionProps,
|
|
sectionId: null,
|
|
columnId: null,
|
|
};
|
|
|
|
const planDefinitions: Array<{ name: string; price: string }> = [
|
|
{ name: "Basic", price: "₩9,900/월" },
|
|
{ name: "Pro", price: "₩29,900/월" },
|
|
{ name: "Enterprise", price: "문의" },
|
|
];
|
|
|
|
const pricingBlocks: Block[] = columns.flatMap((col, index) => {
|
|
const plan = planDefinitions[index] ?? planDefinitions[0];
|
|
|
|
const nameId = createId();
|
|
const priceId = createId();
|
|
|
|
const nameProps: TextBlockProps = {
|
|
text: plan.name,
|
|
align: "center",
|
|
size: "lg",
|
|
} as any;
|
|
|
|
const priceProps: TextBlockProps = {
|
|
text: plan.price,
|
|
align: "center",
|
|
size: "base",
|
|
} as any;
|
|
|
|
const nameBlock: Block = {
|
|
id: nameId,
|
|
type: "text",
|
|
props: nameProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
const priceBlock: Block = {
|
|
id: priceId,
|
|
type: "text",
|
|
props: priceProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
};
|
|
|
|
return [nameBlock, priceBlock];
|
|
});
|
|
|
|
const blocks: Block[] = [sectionBlock, ...pricingBlocks];
|
|
const lastSelectedId = pricingBlocks[pricingBlocks.length - 1]?.id ?? sectionId;
|
|
|
|
return { blocks, lastSelectedId };
|
|
}
|