Files
page-builder/src/app/editor/templates/faqTemplate.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

90 lines
2.1 KiB
TypeScript

"use client";
import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
export function createFaqTemplateBlocks(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: "default",
paddingY: "md",
// FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
paddingYPx: 56,
maxWidthPx: 720,
backgroundColorCustom: "#020617",
columns,
} as any;
const sectionBlock: Block = {
id: sectionId,
type: "section",
props: sectionProps,
sectionId: null,
columnId: null,
};
const firstColumnId = `${sectionId}_col_1`;
const faqPairs = [
{
question: "자주 묻는 질문 1",
answer: "첫 번째 질문에 대한 답변을 여기에 입력하세요.",
},
{
question: "자주 묻는 질문 2",
answer: "두 번째 질문에 대한 답변을 여기에 입력하세요.",
},
{
question: "자주 묻는 질문 3",
answer: "세 번째 질문에 대한 답변을 여기에 입력하세요.",
},
];
const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
const qId = createId();
const aId = createId();
const questionProps: TextBlockProps = {
text: pair.question,
align: "left",
size: "lg",
} as any;
const answerProps: TextBlockProps = {
text: pair.answer,
align: "left",
size: "sm",
} as any;
const questionBlock: Block = {
id: qId,
type: "text",
props: questionProps,
sectionId,
columnId: firstColumnId,
};
const answerBlock: Block = {
id: aId,
type: "text",
props: answerProps,
sectionId,
columnId: firstColumnId,
};
return [questionBlock, answerBlock];
});
const blocks: Block[] = [sectionBlock, ...faqBlocks];
const lastSelectedId = faqBlocks[faqBlocks.length - 1]?.id ?? sectionId;
return { blocks, lastSelectedId };
}