feat: 16.1 Export 미리보기 UX 추가

src/app/api/export/preview/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/app/api/export/route";
+
+// /api/export/preview 라우트는 Export 결과 HTML 을 ZIP 없이 바로 반환하는
+// 경량 프리뷰용 엔드포인트이다. 에디터에서 Export 미리보기 UX 를 제공하기 위해 사용한다.
+
+type PreviewRequestBody = {
+  blocks: Block[];
+  projectConfig?: ProjectConfig;
+};
+
+export async function POST(request: Request) {
+  let body: PreviewRequestBody;
+
+  try {
+    // JSON 본문을 파싱해서 blocks + projectConfig 를 추출한다.
+    body = (await request.json()) as PreviewRequestBody;
+  } catch {
+    // 잘못된 JSON 요청에 대해서는 400 에러를 반환한다.
+    return NextResponse.json({ message: "잘못된 JSON 요청입니다." }, { status: 400 });
+  }
+
+  const blocks = Array.isArray(body.blocks) ? body.blocks : [];
+  const projectConfig = body.projectConfig;
+
+  // Export 본문 HTML 은 기존 buildStaticHtml 을 재사용해서 생성한다.
+  // 이렇게 하면 /api/export ZIP 라우트와 동일한 정적 HTML 을 얻을 수 있다.
+  const html = buildStaticHtml(blocks, projectConfig);
+
+  // Export 미리보기는 ZIP 이 아니라 순수 HTML 문자열을 반환한다.
+  return new NextResponse(html, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+    },
+  });
+}

src/app/editor/page.tsx

@@ -135,7 +135,9 @@ export default function EditorPage() {
   const [selectedBlockIds, setSelectedBlockIds] = useState<string[]>([]);
 
   const [menuOpen, setMenuOpen] = useState(false);
-  const [activeModal, setActiveModal] = useState<"project" | "json" | null>(null);
+  const [activeModal, setActiveModal] = useState<"project" | "json" | "exportPreview" | null>(null);
+  const [exportPreviewHtml, setExportPreviewHtml] = useState("");
+  const [exportPreviewStatus, setExportPreviewStatus] = useState<"idle" | "loading" | "error">("idle");
 
   const sensors = useSensors(useSensor(PointerSensor));
 
@@ -188,6 +190,37 @@ export default function EditorPage() {
     }
   };
 
+  const handleRefreshExportPreview = async () => {
+    try {
+      setExportPreviewStatus("loading");
+
+      const payload = {
+        blocks,
+        projectConfig,
+      };
+
+      const response = await fetch("/api/export/preview", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        setExportPreviewStatus("error");
+        return;
+      }
+
+      const html = await response.text();
+      setExportPreviewHtml(html);
+      setExportPreviewStatus("idle");
+    } catch (error) {
+      console.error("Export 미리보기 요청 중 오류", error);
+      setExportPreviewStatus("error");
+    }
+  };
+
   const commitEditing = () => {
     if (!editingBlockId) return;
     updateBlock(editingBlockId, { text: editingText });
@@ -685,6 +718,16 @@ export default function EditorPage() {
                 >
                   JSON 내보내기/불러오기
                 </button>
+                <button
+                  type="button"
+                  className="w-full px-3 py-2 text-left hover:bg-slate-800 text-slate-100 border-t border-slate-800"
+                  onClick={() => {
+                    setMenuOpen(false);
+                    setActiveModal("exportPreview");
+                  }}
+                >
+                  Export 미리보기
+                </button>
                 <button
                   type="button"
                   className="w-full px-3 py-2 text-left hover:bg-slate-800 text-slate-100 border-t border-slate-800"
@@ -807,6 +850,55 @@ export default function EditorPage() {
         </div>
       )}
 
+      {activeModal === "exportPreview" && (
+        <div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60">
+          <div className="w-full max-w-4xl rounded-lg border border-slate-700 bg-slate-900 p-4 text-xs text-slate-100 shadow-xl">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-sm font-medium">Export 미리보기</h3>
+              <button
+                type="button"
+                className="text-slate-400 hover:text-slate-100 text-sm"
+                onClick={() => setActiveModal(null)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-2">
+                <p className="text-[11px] text-slate-400">
+                  현재 캔버스 상태를 기반으로 생성된 정적 Export HTML 을 미리 확인할 수 있습니다.
+                </p>
+                <button
+                  type="button"
+                  className="rounded border border-sky-700 bg-sky-950 px-3 py-1 text-[11px] text-sky-100 hover:bg-sky-900 disabled:opacity-60 disabled:cursor-not-allowed"
+                  onClick={handleRefreshExportPreview}
+                  disabled={exportPreviewStatus === "loading"}
+                >
+                  {exportPreviewStatus === "loading" ? "로딩 중..." : "미리보기 새로고침"}
+                </button>
+              </div>
+              {exportPreviewStatus === "error" && (
+                <p className="text-[11px] text-red-300">
+                  Export 미리보기 HTML 을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.
+                </p>
+              )}
+              {exportPreviewHtml ? (
+                <iframe
+                  title="Export preview"
+                  data-testid="export-preview-frame"
+                  className="w-full h-[480px] rounded border border-slate-700 bg-slate-950"
+                  srcDoc={exportPreviewHtml}
+                />
+              ) : (
+                <div className="w-full h-[200px] rounded border border-dashed border-slate-700 bg-slate-950 flex items-center justify-center text-[11px] text-slate-500">
+                  아직 Export 미리보기 HTML 이 없습니다. "미리보기 새로고침" 버튼을 눌러 생성해 보세요.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {activeModal === "json" && (
         <div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60">
           <div className="w-full max-w-2xl rounded-lg border border-slate-700 bg-slate-900 p-4 text-xs text-slate-100 shadow-xl">

tests/api/export.preview.spec.ts

@@ -0,0 +1,89 @@
+import "dotenv/config";
+import { describe, it, expect } from "vitest";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import { buildStaticHtml } from "@/app/api/export/route";
+
+const BASE_URL = "http://localhost";
+
+// /api/export/preview TDD:
+// - blocks + projectConfig 를 받아 HTML 문자열을 바로 반환하는 경량 엔드포인트.
+// - 기존 buildStaticHtml 과 동일한 HTML 을 반환해야 한다.
+
+describe("/api/export/preview", () => {
+  it("POST /api/export/preview 는 blocks + projectConfig 로부터 HTML 문자열을 반환해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_preview_text",
+        type: "text",
+        props: {
+          text: "Export 미리보기 테스트",
+          align: "center",
+          size: "lg",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "Export 미리보기 페이지",
+      slug: "export-preview",
+      canvasPreset: "full",
+    };
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handlePreview } = await import("@/app/api/export/preview/route");
+
+    const res = await handlePreview(
+      new Request(`${BASE_URL}/api/export/preview`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    expect(res.status).toBe(200);
+    expect(res.headers.get("Content-Type")).toBe("text/html; charset=utf-8");
+
+    const html = await res.text();
+
+    expect(html).toContain("<title>Export 미리보기 페이지</title>");
+    expect(html).toContain("Export 미리보기 테스트");
+  });
+
+  it("/api/export/preview 의 HTML 은 동일 입력에 대해 buildStaticHtml 결과와 동일해야 한다", async () => {
+    const blocks: Block[] = [
+      {
+        id: "blk_preview_compare",
+        type: "text",
+        props: {
+          text: "Preview vs Export 동일성 테스트",
+          align: "left",
+          size: "base",
+        },
+      } as any,
+    ];
+
+    const projectConfig: ProjectConfig = {
+      title: "동일성 테스트 페이지",
+      slug: "preview-equality-test",
+      canvasPreset: "full",
+    };
+
+    const payload = { blocks, projectConfig };
+
+    const { POST: handlePreview } = await import("@/app/api/export/preview/route");
+
+    const res = await handlePreview(
+      new Request(`${BASE_URL}/api/export/preview`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      }),
+    );
+
+    const previewHtml = await res.text();
+    const staticHtml = buildStaticHtml(blocks, projectConfig);
+
+    expect(previewHtml).toBe(staticHtml);
+  });
+});

tests/unit/EditorExportPreview.spec.tsx

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+import EditorPage from "@/app/editor/page";
+
+// EditorPage Export 미리보기 UX TDD
+// - 상단 메뉴에 "Export 미리보기" 항목이 노출되는지 검증한다.
+// - Export 미리보기 모달에서 "미리보기 새로고침" 클릭 시
+//   - /api/export/preview 엔드포인트를 호출하고,
+//   - 반환된 HTML 을 iframe srcdoc 으로 렌더하는지 확인한다.
+
+let mockState: any;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "Export 미리보기 테스트",
+    slug: "export-preview-test",
+    canvasPreset: "full",
+  } as ProjectConfig;
+
+  mockState = {
+    blocks: [
+      {
+        id: "blk_text_1",
+        type: "text",
+        props: {
+          text: "Export 미리보기 본문",
+          align: "left",
+          size: "base",
+        },
+      },
+    ] as Block[],
+    projectConfig: baseProjectConfig,
+    selectedBlockId: null as string | null,
+    selectedListItemId: null as string | null,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    removeBlock: vi.fn(),
+    duplicateBlock: vi.fn(),
+    selectBlock: vi.fn(),
+    selectListItem: vi.fn(),
+    replaceBlocks: vi.fn(),
+    reorderBlocks: vi.fn(),
+    moveBlock: vi.fn(),
+    addTextBlock: vi.fn(),
+    addButtonBlock: vi.fn(),
+    addImageBlock: vi.fn(),
+    addDividerBlock: vi.fn(),
+    addListBlock: vi.fn(),
+    addSectionBlock: vi.fn(),
+    addFormBlock: vi.fn(),
+    addFormInputBlock: vi.fn(),
+    addFormSelectBlock: vi.fn(),
+    addFormCheckboxBlock: vi.fn(),
+    addFormRadioBlock: vi.fn(),
+    addHeroTemplateSection: vi.fn(),
+    addFeaturesTemplateSection: vi.fn(),
+    addCtaTemplateSection: vi.fn(),
+    addFaqTemplateSection: vi.fn(),
+    addPricingTemplateSection: vi.fn(),
+    addTestimonialsTemplateSection: vi.fn(),
+    addBlogTemplateSection: vi.fn(),
+    addTeamTemplateSection: vi.fn(),
+    addFooterTemplateSection: vi.fn(),
+    updateBlock: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  (useEditorStore as any).getState = () => mockState;
+
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+describe("EditorPage - Export 미리보기", () => {
+  it("메뉴에서 Export 미리보기 항목을 클릭하면 Export 미리보기 모달이 열려야 한다", () => {
+    render(<EditorPage />);
+
+    const menuButton = screen.getByText("메뉴");
+    fireEvent.click(menuButton);
+
+    const previewMenuItem = screen.getByText("Export 미리보기");
+    fireEvent.click(previewMenuItem);
+
+    const modalTitle = screen.getByText("Export 미리보기");
+    expect(modalTitle).toBeTruthy();
+  });
+
+  it("Export 미리보기 새로고침 시 /api/export/preview 를 호출하고 iframe 에 HTML 을 렌더해야 한다", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(
+        "<!DOCTYPE html><html><head><title>Export 미리보기 테스트</title></head><body>Export 미리보기 본문</body></html>",
+        {
+          status: 200,
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        },
+      ),
+    );
+
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(<EditorPage />);
+
+    const menuButton = screen.getByText("메뉴");
+    fireEvent.click(menuButton);
+
+    const previewMenuItem = screen.getByText("Export 미리보기");
+    fireEvent.click(previewMenuItem);
+
+    const refreshButton = screen.getByText("미리보기 새로고침");
+    fireEvent.click(refreshButton);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const [url, options] = fetchMock.mock.calls[0] as any;
+    expect(url).toBe("/api/export/preview");
+    expect(options.method).toBe("POST");
+    expect(options.headers["Content-Type"]).toBe("application/json");
+
+    const parsed = JSON.parse(options.body);
+    expect(Array.isArray(parsed.blocks)).toBe(true);
+    expect(parsed.blocks[0].id).toBe("blk_text_1");
+    expect(parsed.projectConfig.slug).toBe("export-preview-test");
+
+    const iframe = await screen.findByTestId("export-preview-frame");
+    const srcDoc = iframe.getAttribute("srcdoc") ?? "";
+    expect(srcDoc).toContain("Export 미리보기 테스트");
+    expect(srcDoc).toContain("Export 미리보기 본문");
+  });
+});