고급 템플릿 및 E2E/유닛 테스트 안정화 작업

src/app/editor/page.tsx

@@ -40,6 +40,9 @@ export default function EditorPage() {
   const addFaqTemplateSection = useEditorStore((state) => state.addFaqTemplateSection);
   const addPricingTemplateSection = useEditorStore((state) => state.addPricingTemplateSection);
   const addTestimonialsTemplateSection = useEditorStore((state) => state.addTestimonialsTemplateSection);
+  const addBlogTemplateSection = useEditorStore((state) => state.addBlogTemplateSection);
+  const addTeamTemplateSection = useEditorStore((state) => state.addTeamTemplateSection);
+  const addFooterTemplateSection = useEditorStore((state) => state.addFooterTemplateSection);
   const updateBlock = useEditorStore((state) => state.updateBlock);
   const selectBlock = useEditorStore((state) => state.selectBlock);
   const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
@@ -397,6 +400,27 @@ export default function EditorPage() {
             >
               Testimonials 템플릿 추가
             </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={addBlogTemplateSection}
+            >
+              Blog 템플릿 추가
+            </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={addTeamTemplateSection}
+            >
+              Team 템플릿 추가
+            </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={addFooterTemplateSection}
+            >
+              Footer 템플릿 추가
+            </button>
           </div>
           <p className="text-xs text-slate-500">
             Text / Image / Button / Section 블록을 이 영역에서 추가할 수 있습니다.

src/features/editor/state/editorStore.ts

@@ -63,6 +63,9 @@ export interface EditorState {
   addFaqTemplateSection: () => void;
   addPricingTemplateSection: () => void;
   addTestimonialsTemplateSection: () => void;
+  addBlogTemplateSection: () => void;
+  addTeamTemplateSection: () => void;
+  addFooterTemplateSection: () => void;
   updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps>) => void;
   selectBlock: (id: string | null) => void;
   replaceBlocks: (blocks: Block[]) => void;
@@ -268,6 +271,225 @@ const createEditorState = (set: any, get: any): EditorState => ({
       });
     },
 
+    // Blog 템플릿 섹션 추가: 3컬럼 포스트 카드(제목/요약)를 생성한다
+    addBlogTemplateSection: () => {
+      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 postDefinitions = [
+        { title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
+        { title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
+        { title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
+      ];
+
+      const blogBlocks: Block[] = columns.flatMap((col, index) => {
+        const post = postDefinitions[index] ?? postDefinitions[0];
+
+        const titleId = createId();
+        const summaryId = createId();
+
+        const titleBlock: Block = {
+          id: titleId,
+          type: "text",
+          props: {
+            text: post.title,
+            align: "left",
+            size: "lg",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        const summaryBlock: Block = {
+          id: summaryId,
+          type: "text",
+          props: {
+            text: post.summary,
+            align: "left",
+            size: "sm",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        return [titleBlock, summaryBlock];
+      });
+
+      const lastBlockId = blogBlocks[blogBlocks.length - 1].id;
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, ...blogBlocks];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: lastBlockId,
+        };
+      });
+    },
+
+    // Team 템플릿 섹션 추가: 3컬럼 팀 카드(이름/역할/소개)를 생성한다
+    addTeamTemplateSection: () => {
+      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 memberDefinitions = [
+        { name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
+        { name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
+        { name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
+      ];
+
+      const teamBlocks: Block[] = columns.flatMap((col, index) => {
+        const m = memberDefinitions[index] ?? memberDefinitions[0];
+
+        const nameId = createId();
+        const roleId = createId();
+        const bioId = createId();
+
+        const nameBlock: Block = {
+          id: nameId,
+          type: "text",
+          props: {
+            text: m.name,
+            align: "center",
+            size: "lg",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        const roleBlock: Block = {
+          id: roleId,
+          type: "text",
+          props: {
+            text: m.role,
+            align: "center",
+            size: "base",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        const bioBlock: Block = {
+          id: bioId,
+          type: "text",
+          props: {
+            text: m.bio,
+            align: "center",
+            size: "sm",
+          },
+          sectionId,
+          columnId: col.id,
+        };
+
+        return [nameBlock, roleBlock, bioBlock];
+      });
+
+      const lastBlockId = teamBlocks[teamBlocks.length - 1].id;
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, ...teamBlocks];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: lastBlockId,
+        };
+      });
+    },
+
+    // Footer 템플릿 섹션 추가: 링크/카피라이트 텍스트가 포함된 1컬럼 섹션을 생성한다
+    addFooterTemplateSection: () => {
+      const sectionId = createId();
+
+      const sectionBlock: Block = {
+        id: sectionId,
+        type: "section",
+        props: {
+          background: "muted",
+          paddingY: "md",
+          columns: [
+            {
+              id: `${sectionId}_col_1`,
+              span: 12,
+            },
+          ],
+        },
+        sectionId: null,
+        columnId: null,
+      };
+
+      const firstColumnId = `${sectionId}_col_1`;
+
+      const linksId = createId();
+      const copyrightId = createId();
+
+      const linksBlock: Block = {
+        id: linksId,
+        type: "text",
+        props: {
+          text: "이용약관 · 개인정보처리방침",
+          align: "center",
+          size: "sm",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      const copyrightBlock: Block = {
+        id: copyrightId,
+        type: "text",
+        props: {
+          text: "© 2025 MyLanding. All rights reserved.",
+          align: "center",
+          size: "sm",
+        },
+        sectionId,
+        columnId: firstColumnId,
+      };
+
+      set((state: EditorState) => {
+        const newBlocks = [...state.blocks, sectionBlock, linksBlock, copyrightBlock];
+
+        return {
+          blocks: newBlocks,
+          selectedBlockId: copyrightId,
+        };
+      });
+    },
+
     // CTA 템플릿 섹션 추가: 텍스트와 버튼이 포함된 1컬럼 섹션을 생성한다
     addCtaTemplateSection: () => {
       const sectionId = createId();