video 블록 및 리펙터링

src/app/editor/templates/blogTemplate.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
 
 export function createBlogTemplateBlocks(opts: {
   sectionId: string;
@@ -42,21 +42,40 @@ export function createBlogTemplateBlocks(opts: {
   const blogBlocks: Block[] = columns.flatMap((col, index) => {
     const post = postDefinitions[index] ?? postDefinitions[0];
 
+    const imageId = createId();
     const titleId = createId();
     const summaryId = createId();
 
+    const imageProps: ImageBlockProps = {
+      src: "https://via.placeholder.com/400x250/1e293b/94a3b8?text=Blog+Image",
+      alt: post.title,
+      align: "center",
+      widthMode: "auto",
+      borderRadius: "md",
+    };
+
     const titleProps: TextBlockProps = {
       text: post.title,
       align: "left",
       size: "lg",
+      bold: true,
     } as any;
 
     const summaryProps: TextBlockProps = {
       text: post.summary,
       align: "left",
       size: "sm",
+      color: "muted",
     } as any;
 
+    const imageBlock: Block = {
+      id: imageId,
+      type: "image",
+      props: imageProps,
+      sectionId,
+      columnId: col.id,
+    };
+
     const titleBlock: Block = {
       id: titleId,
       type: "text",
@@ -73,7 +92,7 @@ export function createBlogTemplateBlocks(opts: {
       columnId: col.id,
     };
 
-    return [titleBlock, summaryBlock];
+    return [imageBlock, titleBlock, summaryBlock];
   });
 
   const blocks: Block[] = [sectionBlock, ...blogBlocks];

src/app/editor/templates/ctaTemplate.ts

@@ -9,7 +9,8 @@ export function createCtaTemplateBlocks(opts: {
   const { sectionId, createId } = opts;
 
   const columns: SectionBlockProps["columns"] = [
-    { id: `${sectionId}_col_1`, span: 12 },
+    { id: `${sectionId}_col_1`, span: 8 },
+    { id: `${sectionId}_col_2`, span: 4 },
   ];
 
   const sectionProps: SectionBlockProps = {
@@ -31,20 +32,21 @@ export function createCtaTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const firstColumnId = `${sectionId}_col_1`;
+  const leftColumnId = `${sectionId}_col_1`;
+  const rightColumnId = `${sectionId}_col_2`;
 
   const textId = createId();
   const textProps: TextBlockProps = {
-    text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.",
-    align: "center",
-    size: "base",
+    text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
+    align: "left",
+    size: "lg",
   } as any;
   const textBlock: Block = {
     id: textId,
     type: "text",
     props: textProps,
     sectionId,
-    columnId: firstColumnId,
+    columnId: leftColumnId,
   };
 
   const buttonId = createId();
@@ -52,10 +54,10 @@ export function createCtaTemplateBlocks(opts: {
     label: "CTA 버튼",
     href: "#",
     align: "center",
-    size: "md",
+    size: "lg",
     variant: "solid",
     colorPalette: "primary",
-    fullWidth: false,
+    fullWidth: true,
     borderRadius: "md",
     textColorCustom: "#0b1120",
     fillColorCustom: "#0ea5e9",
@@ -66,7 +68,7 @@ export function createCtaTemplateBlocks(opts: {
     type: "button",
     props: buttonProps,
     sectionId,
-    columnId: firstColumnId,
+    columnId: rightColumnId,
   };
 
   const blocks: Block[] = [sectionBlock, textBlock, buttonBlock];

src/app/editor/templates/faqTemplate.ts

@@ -9,15 +9,17 @@ export function createFaqTemplateBlocks(opts: {
   const { sectionId, createId } = opts;
 
   const columns: SectionBlockProps["columns"] = [
-    { id: `${sectionId}_col_1`, span: 12 },
+    { id: `${sectionId}_col_1`, span: 3 },
+    { id: `${sectionId}_col_2`, span: 9 },
   ];
 
   const sectionProps: SectionBlockProps = {
     background: "default",
     paddingY: "md",
     // FAQ 는 비교적 좁은 폭과 보통 여백을 사용한다.
-    paddingYPx: 56,
-    maxWidthPx: 720,
+    paddingYPx: 80,
+    maxWidthPx: 1024,
+    gapXPx: 48,
     backgroundColorCustom: "#020617",
     columns,
   } as any;
@@ -30,20 +32,54 @@ export function createFaqTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const firstColumnId = `${sectionId}_col_1`;
+  const leftColumnId = `${sectionId}_col_1`;
+  const rightColumnId = `${sectionId}_col_2`;
 
+  // Left Column: Title
+  const titleId = createId();
+  const titleProps: TextBlockProps = {
+    text: "FAQ",
+    align: "left",
+    size: "xl",
+    bold: true,
+  } as any;
+  const titleBlock: Block = {
+    id: titleId,
+    type: "text",
+    props: titleProps,
+    sectionId,
+    columnId: leftColumnId,
+  };
+
+  const subTitleId = createId();
+  const subTitleProps: TextBlockProps = {
+    text: "자주 묻는 질문",
+    align: "left",
+    size: "sm",
+    color: "muted",
+  } as any;
+  const subTitleBlock: Block = {
+    id: subTitleId,
+    type: "text",
+    props: subTitleProps,
+    sectionId,
+    columnId: leftColumnId,
+  };
+
+
+  // Right Column: Q&A List
   const faqPairs = [
     {
-      question: "자주 묻는 질문 1",
-      answer: "첫 번째 질문에 대한 답변을 여기에 입력하세요.",
+      question: "서비스 이용료는 얼마인가요?",
+      answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
     },
     {
-      question: "자주 묻는 질문 2",
-      answer: "두 번째 질문에 대한 답변을 여기에 입력하세요.",
+      question: "환불 정책은 어떻게 되나요?",
+      answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
     },
     {
-      question: "자주 묻는 질문 3",
-      answer: "세 번째 질문에 대한 답변을 여기에 입력하세요.",
+      question: "팀원 초대 기능이 있나요?",
+      answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
     },
   ];
 
@@ -55,12 +91,14 @@ export function createFaqTemplateBlocks(opts: {
       text: pair.question,
       align: "left",
       size: "lg",
+      bold: true,
     } as any;
 
     const answerProps: TextBlockProps = {
       text: pair.answer,
       align: "left",
-      size: "sm",
+      size: "base",
+      color: "muted",
     } as any;
 
     const questionBlock: Block = {
@@ -68,7 +106,7 @@ export function createFaqTemplateBlocks(opts: {
       type: "text",
       props: questionProps,
       sectionId,
-      columnId: firstColumnId,
+      columnId: rightColumnId,
     };
 
     const answerBlock: Block = {
@@ -76,13 +114,13 @@ export function createFaqTemplateBlocks(opts: {
       type: "text",
       props: answerProps,
       sectionId,
-      columnId: firstColumnId,
+      columnId: rightColumnId,
     };
 
     return [questionBlock, answerBlock];
   });
 
-  const blocks: Block[] = [sectionBlock, ...faqBlocks];
+  const blocks: Block[] = [sectionBlock, titleBlock, subTitleBlock, ...faqBlocks];
   const lastSelectedId = faqBlocks[faqBlocks.length - 1]?.id ?? sectionId;
 
   return { blocks, lastSelectedId };

src/app/editor/templates/footerTemplate.ts

@@ -9,15 +9,17 @@ export function createFooterTemplateBlocks(opts: {
   const { sectionId, createId } = opts;
 
   const columns: SectionBlockProps["columns"] = [
-    { id: `${sectionId}_col_1`, span: 12 },
+    { id: `${sectionId}_col_1`, span: 4 },
+    { id: `${sectionId}_col_2`, span: 4 },
+    { id: `${sectionId}_col_3`, span: 4 },
   ];
 
   const sectionProps: SectionBlockProps = {
     background: "muted",
     paddingY: "md",
     // 푸터는 상대적으로 낮은 높이와 좁은 최대 폭을 사용한다.
-    paddingYPx: 40,
-    maxWidthPx: 800,
+    paddingYPx: 64,
+    maxWidthPx: 1120,
     backgroundColorCustom: "#020617",
     columns,
   } as any;
@@ -30,37 +32,74 @@ export function createFooterTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const firstColumnId = `${sectionId}_col_1`;
+  const col1Id = `${sectionId}_col_1`;
+  const col2Id = `${sectionId}_col_2`;
+  const col3Id = `${sectionId}_col_3`;
 
+  // Col 1: Brand
+  const brandId = createId();
+  const brandProps: TextBlockProps = {
+    text: "MyLanding",
+    align: "left",
+    size: "xl",
+    bold: true,
+  } as any;
+  const brandBlock: Block = {
+    id: brandId,
+    type: "text",
+    props: brandProps,
+    sectionId,
+    columnId: col1Id,
+  };
+
+  const descId = createId();
+  const descProps: TextBlockProps = {
+    text: "더 나은 웹사이트를 위한 최고의 선택.",
+    align: "left",
+    size: "sm",
+    color: "muted",
+  } as any;
+  const descBlock: Block = {
+    id: descId,
+    type: "text",
+    props: descProps,
+    sectionId,
+    columnId: col1Id,
+  };
+
+  // Col 2: Links
   const linksId = createId();
   const linksProps: TextBlockProps = {
-    text: "이용약관 · 개인정보처리방침",
+    text: "서비스 소개\n요금제\n고객지원\n문의하기",
     align: "center",
     size: "sm",
+    color: "muted",
   } as any;
   const linksBlock: Block = {
     id: linksId,
     type: "text",
     props: linksProps,
     sectionId,
-    columnId: firstColumnId,
+    columnId: col2Id,
   };
 
+  // Col 3: Copyright
   const copyrightId = createId();
   const copyrightProps: TextBlockProps = {
-    text: "© 2025 MyLanding. All rights reserved.",
-    align: "center",
-    size: "sm",
+    text: "© 2025 MyLanding.\nAll rights reserved.",
+    align: "right",
+    size: "xs",
+    color: "muted",
   } as any;
   const copyrightBlock: Block = {
     id: copyrightId,
     type: "text",
     props: copyrightProps,
     sectionId,
-    columnId: firstColumnId,
+    columnId: col3Id,
   };
 
-  const blocks: Block[] = [sectionBlock, linksBlock, copyrightBlock];
+  const blocks: Block[] = [sectionBlock, brandBlock, descBlock, linksBlock, copyrightBlock];
   const lastSelectedId = copyrightId;
 
   return { blocks, lastSelectedId };

src/app/editor/templates/pricingTemplate.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
 
 export function createPricingTemplateBlocks(opts: {
   sectionId: string;
@@ -33,47 +33,106 @@ export function createPricingTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const planDefinitions: Array<{ name: string; price: string }> = [
+  const planDefinitions: Array<{ name: string; price: string; popular?: boolean }> = [
     { name: "Basic", price: "₩9,900/월" },
-    { name: "Pro", price: "₩29,900/월" },
+    { name: "Pro", price: "₩29,900/월", popular: true },
     { name: "Enterprise", price: "문의" },
   ];
 
   const pricingBlocks: Block[] = columns.flatMap((col, index) => {
     const plan = planDefinitions[index] ?? planDefinitions[0];
+    const isPopular = !!plan.popular;
+
+    const blocksInCol: Block[] = [];
+
+    // Popular Badge (only for middle)
+    if (isPopular) {
+      const badgeId = createId();
+      const badgeProps: TextBlockProps = {
+        text: "MOST POPULAR",
+        align: "center",
+        size: "xs",
+        color: "primary",
+        bold: true,
+      } as any;
+      blocksInCol.push({
+        id: badgeId,
+        type: "text",
+        props: badgeProps,
+        sectionId,
+        columnId: col.id,
+      });
+    }
 
     const nameId = createId();
-    const priceId = createId();
-
     const nameProps: TextBlockProps = {
       text: plan.name,
       align: "center",
       size: "lg",
+      bold: true,
     } as any;
-
-    const priceProps: TextBlockProps = {
-      text: plan.price,
-      align: "center",
-      size: "base",
-    } as any;
-
-    const nameBlock: Block = {
+    blocksInCol.push({
       id: nameId,
       type: "text",
       props: nameProps,
       sectionId,
       columnId: col.id,
-    };
+    });
 
-    const priceBlock: Block = {
+    const priceId = createId();
+    const priceProps: TextBlockProps = {
+      text: plan.price,
+      align: "center",
+      size: "xl", // Price larger
+    } as any;
+    blocksInCol.push({
       id: priceId,
       type: "text",
       props: priceProps,
       sectionId,
       columnId: col.id,
-    };
+    });
 
-    return [nameBlock, priceBlock];
+    // Features list (simple text for now)
+    const featuresId = createId();
+    const featuresProps: TextBlockProps = {
+      text: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
+      align: "center",
+      size: "sm",
+      color: "muted",
+    } as any;
+    blocksInCol.push({
+      id: featuresId,
+      type: "text",
+      props: featuresProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    // Button
+    const buttonId = createId();
+    const buttonProps: ButtonBlockProps = {
+      label: isPopular ? "시작하기" : "선택하기",
+      href: "#",
+      align: "center",
+      size: "md",
+      variant: isPopular ? "solid" : "outline",
+      colorPalette: "primary",
+      fullWidth: true,
+      borderRadius: "md",
+      textColorCustom: isPopular ? "#0b1120" : "#e2e8f0",
+      fillColorCustom: isPopular ? "#0ea5e9" : "transparent",
+      strokeColorCustom: "#0ea5e9",
+    };
+    blocksInCol.push({
+      id: buttonId,
+      type: "button",
+      props: buttonProps,
+      sectionId,
+      columnId: col.id,
+    });
+
+    return blocksInCol;
   });
 
   const blocks: Block[] = [sectionBlock, ...pricingBlocks];

src/app/editor/templates/teamTemplate.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
 
 export function createTeamTemplateBlocks(opts: {
   sectionId: string;
@@ -42,28 +42,49 @@ export function createTeamTemplateBlocks(opts: {
   const teamBlocks: Block[] = columns.flatMap((col, index) => {
     const m = memberDefinitions[index] ?? memberDefinitions[0];
 
+    const imageId = createId();
     const nameId = createId();
     const roleId = createId();
     const bioId = createId();
 
+    const imageProps: ImageBlockProps = {
+      src: "https://via.placeholder.com/150x150/334155/94a3b8?text=User",
+      alt: m.name,
+      align: "center",
+      widthMode: "fixed",
+      widthPx: 120,
+      borderRadius: "full",
+    };
+
     const nameProps: TextBlockProps = {
       text: m.name,
       align: "center",
       size: "lg",
+      bold: true,
     } as any;
 
     const roleProps: TextBlockProps = {
       text: m.role,
       align: "center",
       size: "base",
+      color: "primary",
     } as any;
 
     const bioProps: TextBlockProps = {
       text: m.bio,
       align: "center",
       size: "sm",
+      color: "muted",
     } as any;
 
+    const imageBlock: Block = {
+      id: imageId,
+      type: "image",
+      props: imageProps,
+      sectionId,
+      columnId: col.id,
+    };
+
     const nameBlock: Block = {
       id: nameId,
       type: "text",
@@ -88,7 +109,7 @@ export function createTeamTemplateBlocks(opts: {
       columnId: col.id,
     };
 
-    return [nameBlock, roleBlock, bioBlock];
+    return [imageBlock, nameBlock, roleBlock, bioBlock];
   });
 
   const blocks: Block[] = [sectionBlock, ...teamBlocks];