섹션 템플릿: Hero/Features/CTA 프리셋 추가
This commit is contained in:
@@ -33,6 +33,9 @@ export default function EditorPage() {
|
||||
const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
|
||||
const addImageBlock = useEditorStore((state) => state.addImageBlock);
|
||||
const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
|
||||
const addHeroTemplateSection = useEditorStore((state) => state.addHeroTemplateSection);
|
||||
const addFeaturesTemplateSection = useEditorStore((state) => state.addFeaturesTemplateSection);
|
||||
const addCtaTemplateSection = useEditorStore((state) => state.addCtaTemplateSection);
|
||||
const updateBlock = useEditorStore((state) => state.updateBlock);
|
||||
const selectBlock = useEditorStore((state) => state.selectBlock);
|
||||
const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
|
||||
@@ -253,6 +256,30 @@ export default function EditorPage() {
|
||||
>
|
||||
섹션 블록 추가
|
||||
</button>
|
||||
<div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
|
||||
<h3 className="text-[11px] font-medium text-slate-300">템플릿</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded border border-sky-700 bg-sky-950 px-3 py-2 text-left text-xs text-sky-100 hover:bg-sky-900"
|
||||
onClick={addHeroTemplateSection}
|
||||
>
|
||||
Hero 템플릿 추가
|
||||
</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={addFeaturesTemplateSection}
|
||||
>
|
||||
Features 템플릿 추가
|
||||
</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={addCtaTemplateSection}
|
||||
>
|
||||
CTA 템플릿 추가
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.
|
||||
</p>
|
||||
|
||||
@@ -55,6 +55,9 @@ export interface EditorState {
|
||||
addButtonBlock: () => void;
|
||||
addImageBlock: () => void;
|
||||
addSectionBlock: () => void;
|
||||
addHeroTemplateSection: () => void;
|
||||
addFeaturesTemplateSection: () => void;
|
||||
addCtaTemplateSection: () => void;
|
||||
updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
|
||||
selectBlock: (id: string | null) => void;
|
||||
replaceBlocks: (blocks: Block[]) => void;
|
||||
@@ -112,6 +115,204 @@ const createEditorState = (set: any, get: any): EditorState => ({
|
||||
}));
|
||||
},
|
||||
|
||||
// Hero 템플릿 섹션 추가: 섹션 1개와 기본 텍스트/버튼 블록들을 첫 컬럼에 배치한다
|
||||
addHeroTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
|
||||
// Hero 템플릿용 섹션: 기본 배경/패딩 + 1컬럼(12)
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: {
|
||||
background: "default",
|
||||
paddingY: "lg",
|
||||
columns: [
|
||||
{
|
||||
id: `${sectionId}_col_1`,
|
||||
span: 12,
|
||||
},
|
||||
],
|
||||
},
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
// Hero 텍스트 블록 (예: 헤드라인)
|
||||
const heroHeadlineId = createId();
|
||||
const heroHeadline: Block = {
|
||||
id: heroHeadlineId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: "Hero 제목을 여기에 입력하세요",
|
||||
align: "center",
|
||||
size: "lg",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
// Hero 서브텍스트 블록
|
||||
const heroSubId = createId();
|
||||
const heroSub: Block = {
|
||||
id: heroSubId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
|
||||
align: "center",
|
||||
size: "base",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
// CTA 버튼 블록
|
||||
const heroButtonId = createId();
|
||||
const heroButton: Block = {
|
||||
id: heroButtonId,
|
||||
type: "button",
|
||||
props: {
|
||||
label: "지금 시작하기",
|
||||
href: "#",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, heroHeadline, heroSub, heroButton];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: heroButtonId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
|
||||
addFeaturesTemplateSection: () => {
|
||||
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: "md",
|
||||
columns,
|
||||
},
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const featureBlocks: Block[] = columns.flatMap((col, index) => {
|
||||
const titleId = createId();
|
||||
const descId = createId();
|
||||
|
||||
const title: Block = {
|
||||
id: titleId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: `Feature ${index + 1} 제목`,
|
||||
align: "left",
|
||||
size: "lg",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
const description: Block = {
|
||||
id: descId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: "해당 기능을 간단히 설명하는 텍스트입니다.",
|
||||
align: "left",
|
||||
size: "sm",
|
||||
},
|
||||
sectionId,
|
||||
columnId: col.id,
|
||||
};
|
||||
|
||||
return [title, description];
|
||||
});
|
||||
|
||||
const lastBlockId = featureBlocks[featureBlocks.length - 1].id;
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, ...featureBlocks];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: lastBlockId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// CTA 템플릿 섹션 추가: 텍스트와 버튼이 포함된 1컬럼 섹션을 생성한다
|
||||
addCtaTemplateSection: () => {
|
||||
const sectionId = createId();
|
||||
|
||||
const sectionBlock: Block = {
|
||||
id: sectionId,
|
||||
type: "section",
|
||||
props: {
|
||||
background: "primary",
|
||||
paddingY: "md",
|
||||
columns: [
|
||||
{
|
||||
id: `${sectionId}_col_1`,
|
||||
span: 12,
|
||||
},
|
||||
],
|
||||
},
|
||||
sectionId: null,
|
||||
columnId: null,
|
||||
};
|
||||
|
||||
const firstColumnId = `${sectionId}_col_1`;
|
||||
|
||||
const textId = createId();
|
||||
const textBlock: Block = {
|
||||
id: textId,
|
||||
type: "text",
|
||||
props: {
|
||||
text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.",
|
||||
align: "center",
|
||||
size: "base",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
const buttonId = createId();
|
||||
const buttonBlock: Block = {
|
||||
id: buttonId,
|
||||
type: "button",
|
||||
props: {
|
||||
label: "CTA 버튼",
|
||||
href: "#",
|
||||
},
|
||||
sectionId,
|
||||
columnId: firstColumnId,
|
||||
};
|
||||
|
||||
set((state: EditorState) => {
|
||||
const newBlocks = [...state.blocks, sectionBlock, textBlock, buttonBlock];
|
||||
|
||||
return {
|
||||
blocks: newBlocks,
|
||||
selectedBlockId: buttonId,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 이미지 블록 추가: 기본 플레이스홀더와 함께 생성 후 선택 상태로 만든다
|
||||
addImageBlock: () => {
|
||||
const id = createId();
|
||||
|
||||
Reference in New Issue
Block a user