97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import type {
|
|
Block,
|
|
SectionBlockProps,
|
|
TextBlockProps,
|
|
ButtonBlockProps,
|
|
} from "@/features/editor/state/editorStore";
|
|
|
|
export function createHeroTemplateBlocks(opts: {
|
|
sectionId: string;
|
|
createId: () => string;
|
|
}): { blocks: Block[]; lastSelectedId: string } {
|
|
const { sectionId, createId } = opts;
|
|
|
|
const sectionProps: SectionBlockProps = {
|
|
background: "default",
|
|
paddingY: "lg",
|
|
// 히어로는 가장 여백이 넓고 화면 중앙에 집중되도록 설정한다.
|
|
paddingYPx: 96,
|
|
maxWidthPx: 960,
|
|
gapXPx: 40,
|
|
backgroundColorCustom: "#020617", // 다크 히어로 섹션
|
|
columns: [
|
|
{
|
|
id: `${sectionId}_col_1`,
|
|
span: 12,
|
|
},
|
|
],
|
|
};
|
|
|
|
const sectionBlock: Block = {
|
|
id: sectionId,
|
|
type: "section",
|
|
props: sectionProps,
|
|
sectionId: null,
|
|
columnId: null,
|
|
};
|
|
|
|
const firstColumnId = `${sectionId}_col_1`;
|
|
|
|
const heroHeadlineId = createId();
|
|
const heroHeadlineProps: TextBlockProps = {
|
|
text: "Hero 제목을 여기에 입력하세요",
|
|
align: "center",
|
|
size: "lg",
|
|
} as any;
|
|
const heroHeadline: Block = {
|
|
id: heroHeadlineId,
|
|
type: "text",
|
|
props: heroHeadlineProps,
|
|
sectionId,
|
|
columnId: firstColumnId,
|
|
};
|
|
|
|
const heroSubId = createId();
|
|
const heroSubProps: TextBlockProps = {
|
|
text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
|
|
align: "center",
|
|
size: "base",
|
|
} as any;
|
|
const heroSub: Block = {
|
|
id: heroSubId,
|
|
type: "text",
|
|
props: heroSubProps,
|
|
sectionId,
|
|
columnId: firstColumnId,
|
|
};
|
|
|
|
const heroButtonId = createId();
|
|
const heroButtonProps: ButtonBlockProps = {
|
|
label: "지금 시작하기",
|
|
href: "#",
|
|
align: "center",
|
|
size: "md",
|
|
variant: "solid",
|
|
colorPalette: "primary",
|
|
fullWidth: false,
|
|
borderRadius: "md",
|
|
fontSizeCustom: "14px",
|
|
textColorCustom: "#0b1120",
|
|
fillColorCustom: "#0ea5e9",
|
|
strokeColorCustom: "#0284c7",
|
|
};
|
|
const heroButton: Block = {
|
|
id: heroButtonId,
|
|
type: "button",
|
|
props: heroButtonProps,
|
|
sectionId,
|
|
columnId: firstColumnId,
|
|
};
|
|
|
|
const blocks: Block[] = [sectionBlock, heroHeadline, heroSub, heroButton];
|
|
|
|
return { blocks, lastSelectedId: heroButtonId };
|
|
}
|