video 블록 및 리펙터링

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];