템플릿 확장: FAQ/Pricing/Testimonials 섹션 추가
This commit is contained in:
@@ -37,6 +37,9 @@ export default function EditorPage() {
|
||||
const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
|
||||
const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
|
||||
const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
|
||||
const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
|
||||
const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
|
||||
const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
|
||||
const updateBlock = useEditorStore((state) => state.updateBlock);
|
||||
const selectBlock = useEditorStore((state) => state.selectBlock);
|
||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||
@@ -373,6 +376,27 @@ export default function EditorPage() {
|
||||
>
|
||||
CTA 템플릿 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addFaqTemplateSection}
|
||||
>
|
||||
FAQ 템플릿 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addPricingTemplateSection}
|
||||
>
|
||||
Pricing 템플릿 추가
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
|
||||
onClick={addTestimonialsTemplateSection}
|
||||
>
|
||||
Testimonials 템플릿 추가
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
|
||||
|
||||
@@ -60,6 +60,9 @@ export interface EditorState {
|
||||
addHeroTemplateSection: () => void;
|
||||
addFeaturesTemplateSection: () => void;
|
||||
addCtaTemplateSection: () => void;
|
||||
addFaqTemplateSection: () => void;
|
||||
addPricingTemplateSection: () => void;
|
||||
addTestimonialsTemplateSection: () => void;
|
||||
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
|
||||
selectBlock: (id: string | null) => void;
|
||||
replaceBlocks: (blocks: Block[]) => void;
|
||||
@@ -323,6 +326,233 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
});
|
||||
},
|
||||
|
||||
// FAQ 템플릿 섹션 추가: 질문/답변 쌍이 수직으로 나열된 섹션을 생성한다
|
||||
addFaqTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: {
|
||||
background: "default",
|
||||
paddingY: "md",
|
||||
columns: [
|
||||
{
|
||||
id: `${sectionId}_col_1`,
|
||||
span: 12,
|
||||
},
|
||||
],
|
||||
},
|
||||
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 questionBlock: Block = {
|
||||
id: qId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: pair.question,
|
||||
align: "left",
|
||||
size: "lg",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const answerBlock: Block = {
|
||||
id: aId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: pair.answer,
|
||||
align: "left",
|
||||
size: "sm",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
return [questionBlock, answerBlock];
|
||||
});
|
||||
|
||||
const lastBlockId = faqBlocks[faqBlocks.length - 1].id;
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, ...faqBlocks];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: lastBlockId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// Pricing 템플릿 섹션 추가: 3컬럼 요금제 카드(플랜 이름/가격/설명)를 생성한다
|
||||
addPricingTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
|
||||
const columns = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: {
|
||||
background: "muted",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
},
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const planDefinitions = [
|
||||
{ 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 nameBlock: Block = {
|
||||
id: nameId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: plan.name,
|
||||
align: "center",
|
||||
size: "lg",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const priceBlock: Block = {
|
||||
id: priceId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: plan.price,
|
||||
align: "center",
|
||||
size: "base",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [nameBlock, priceBlock];
|
||||
});
|
||||
|
||||
const lastBlockId = pricingBlocks[pricingBlocks.length - 1].id;
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, ...pricingBlocks];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: lastBlockId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// Testimonials 템플릿 섹션 추가: 3컬럼 후기 카드(본문/작성자)를 생성한다
|
||||
addTestimonialsTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
|
||||
const columns = [
|
||||
{ id: `${sectionId}_col_1`, span: 4 },
|
||||
{ id: `${sectionId}_col_2`, span: 4 },
|
||||
{ id: `${sectionId}_col_3`, span: 4 },
|
||||
];
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
columns,
|
||||
},
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const testimonialDefinitions = [
|
||||
{ body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.", author: "홍길동" },
|
||||
{ body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.", author: "김영희" },
|
||||
{ body: "팀 전체가 만족하는 빌더입니다.", author: "이철수" },
|
||||
];
|
||||
|
||||
const testimonialBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const t = testimonialDefinitions[index] ?? testimonialDefinitions[0];
|
||||
|
||||
const bodyId = createId();
|
||||
const authorId = createId();
|
||||
|
||||
const bodyBlock: Block = {
|
||||
id: bodyId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: t.body,
|
||||
align: "left",
|
||||
size: "base",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const authorBlock: Block = {
|
||||
id: authorId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: `- ${t.author}`,
|
||||
align: "left",
|
||||
size: "sm",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [bodyBlock, authorBlock];
|
||||
});
|
||||
|
||||
const lastBlockId = testimonialBlocks[testimonialBlocks.length - 1].id;
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, ...testimonialBlocks];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: lastBlockId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
|
||||
addImageBlock: () => {
|
||||
const id = createId();
|
||||
|
||||
Reference in New Issue
Block a user