143 lines
3.6 KiB
TypeScript
143 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } 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; popular?: boolean }> = [
|
|
{ name: "Basic", price: "₩9,900/월" },
|
|
{ name: "Pro", price: "₩29,900/월", popular: true },
|
|
{ name: "Enterprise", price: "문의" },
|
|
];
|
|
|
|
const pricingBlocks: Block[] = columns.flatMap((col, index) => {
|
|
const plan = planDefinitions[index] ?? planDefinitions[0];
|
|
const isPopular = !!plan.popular;
|
|
|
|
const blocksInCol: Block[] = [];
|
|
|
|
// Popular Badge (only for middle)
|
|
if (isPopular) {
|
|
const badgeId = createId();
|
|
const badgeProps: TextBlockProps = {
|
|
text: "MOST POPULAR",
|
|
align: "center",
|
|
size: "xs",
|
|
color: "primary",
|
|
bold: true,
|
|
} as any;
|
|
blocksInCol.push({
|
|
id: badgeId,
|
|
type: "text",
|
|
props: badgeProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
});
|
|
}
|
|
|
|
const nameId = createId();
|
|
const nameProps: TextBlockProps = {
|
|
text: plan.name,
|
|
align: "center",
|
|
size: "lg",
|
|
bold: true,
|
|
} as any;
|
|
blocksInCol.push({
|
|
id: nameId,
|
|
type: "text",
|
|
props: nameProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
});
|
|
|
|
const priceId = createId();
|
|
const priceProps: TextBlockProps = {
|
|
text: plan.price,
|
|
align: "center",
|
|
size: "xl", // Price larger
|
|
} as any;
|
|
blocksInCol.push({
|
|
id: priceId,
|
|
type: "text",
|
|
props: priceProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
});
|
|
|
|
// Features list (simple text for now)
|
|
const featuresId = createId();
|
|
const featuresProps: TextBlockProps = {
|
|
text: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
|
|
align: "center",
|
|
size: "sm",
|
|
color: "muted",
|
|
} as any;
|
|
blocksInCol.push({
|
|
id: featuresId,
|
|
type: "text",
|
|
props: featuresProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
});
|
|
|
|
// Button
|
|
const buttonId = createId();
|
|
const buttonProps: ButtonBlockProps = {
|
|
label: isPopular ? "시작하기" : "선택하기",
|
|
href: "#",
|
|
align: "center",
|
|
size: "md",
|
|
variant: isPopular ? "solid" : "outline",
|
|
colorPalette: "primary",
|
|
fullWidth: true,
|
|
borderRadius: "md",
|
|
textColorCustom: isPopular ? "#0b1120" : "#e2e8f0",
|
|
fillColorCustom: isPopular ? "#0ea5e9" : "transparent",
|
|
strokeColorCustom: "#0ea5e9",
|
|
};
|
|
blocksInCol.push({
|
|
id: buttonId,
|
|
type: "button",
|
|
props: buttonProps,
|
|
sectionId,
|
|
columnId: col.id,
|
|
});
|
|
|
|
return blocksInCol;
|
|
});
|
|
|
|
const blocks: Block[] = [sectionBlock, ...pricingBlocks];
|
|
const lastSelectedId = pricingBlocks[pricingBlocks.length - 1]?.id ?? sectionId;
|
|
|
|
return { blocks, lastSelectedId };
|
|
}
|