feat: 16.1 Export 미리보기 UX 추가

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">