비디오 태그 및 폼 블록 정리

src/app/preview/page.tsx

@@ -17,6 +17,41 @@ export default function PreviewPage() {
      mainStyle.backgroundColor = projectConfig.bodyBgColorHex;
    }
 
+  const handleExportZip = async () => {
+    try {
+      const payload = {
+        blocks,
+        projectConfig,
+      };
+
+      const response = await fetch("/api/export", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const slug = (projectConfig?.slug ?? "").trim() || "page-builder-export";
+
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${slug}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("프리뷰 ZIP 내보내기 중 오류", error);
+    }
+  };
+
   const widthPx =
     typeof projectConfig?.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
       ? projectConfig.canvasWidthPx
@@ -43,12 +78,23 @@ export default function PreviewPage() {
           <h1 className="text-xl font-semibold">Page Preview</h1>
           <p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
         </div>
-        <Link
-          href="/editor"
-          className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
-        >
-          에디터로 돌아가기
-        </Link>
+        <div className="flex items-center gap-2 text-xs">
+          <button
+            type="button"
+            className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
+            onClick={() => {
+              void handleExportZip();
+            }}
+          >
+            페이지 파일로 내보내기 (ZIP)
+          </button>
+          <Link
+            href="/editor"
+            className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
+          >
+            에디터로 돌아가기
+          </Link>
+        </div>
       </header>
       {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링하되, projectConfig 에 따라 최대 폭을 제한한다. */}
       <section className="flex flex-1 overflow-auto">