이미지 파일 업로드 기능

src/app/preview/page.tsx

@@ -1,19 +1,67 @@
 "use client";
 
+import type { CSSProperties } from "react";
+import Link from "next/link";
 import { useEditorStore } from "@/features/editor/state/editorStore";
 import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
 
 export default function PreviewPage() {
   const blocks = useEditorStore((state) => state.blocks);
+  const projectConfig = useEditorStore((state) => (state as any).projectConfig);
+
+  const canvasStyle: CSSProperties = {};
+  const preset = projectConfig?.canvasPreset ?? "full";
+
+   const mainStyle: CSSProperties = {};
+   if (projectConfig?.bodyBgColorHex && projectConfig.bodyBgColorHex.trim()) {
+     mainStyle.backgroundColor = projectConfig.bodyBgColorHex;
+   }
+
+  const widthPx =
+    typeof projectConfig?.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
+      ? projectConfig.canvasWidthPx
+      : null;
+
+  if (widthPx != null) {
+    canvasStyle.maxWidth = `${widthPx}px`;
+  } else if (preset === "mobile") {
+    canvasStyle.maxWidth = "390px";
+  } else if (preset === "tablet") {
+    canvasStyle.maxWidth = "768px";
+  } else if (preset === "desktop") {
+    canvasStyle.maxWidth = "1200px";
+  }
+
+  if (projectConfig?.canvasBgColorHex && projectConfig.canvasBgColorHex.trim()) {
+    canvasStyle.backgroundColor = projectConfig.canvasBgColorHex;
+  }
 
   return (
-    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
+    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50" style={mainStyle}>
       <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
-        <h1 className="text-xl font-semibold">Page Preview</h1>
-        <p className="text-xs text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
+        <div>
+          <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>
       </header>
-      {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링 */}
-      <PublicPageRenderer blocks={blocks} />
+      {/* 에디터 크롬 없이 순수 페이지 형태로 블록들을 렌더링하되, projectConfig 에 따라 최대 폭을 제한한다. */}
+      <section className="flex flex-1 overflow-auto">
+        <div className="flex-1 flex justify-center px-4 py-6">
+          <div
+            data-testid="preview-canvas-inner"
+            className="w-full"
+            style={canvasStyle}
+          >
+            <PublicPageRenderer blocks={blocks} />
+          </div>
+        </div>
+      </section>
     </main>
   );
 }