이미지 파일 업로드 기능

src/app/editor/EditorCanvas.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import {
   DndContext,
   DragOverlay,
@@ -10,7 +10,7 @@ import {
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { rectIntersection } from "@dnd-kit/core";
 
-import type { Block, ButtonBlockProps, ImageBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { Block, ButtonBlockProps, ImageBlockProps, ProjectConfig, TextBlockProps } from "@/features/editor/state/editorStore";
 
 interface EditorCanvasProps {
   blocks: Block[];
@@ -25,6 +25,7 @@ interface EditorCanvasProps {
   handleDragStart: (event: DragStartEvent) => void;
   handleDragEnd: (event: DragEndEvent) => void;
   handleDragCancel: () => void;
+  projectConfig: ProjectConfig;
 }
 
 export function EditorCanvas(props: EditorCanvasProps) {
@@ -38,8 +39,30 @@ export function EditorCanvas(props: EditorCanvasProps) {
     handleDragStart,
     handleDragEnd,
     handleDragCancel,
+    projectConfig,
   } = props;
 
+  const canvasInnerStyle: CSSProperties = {};
+  const preset = projectConfig.canvasPreset ?? "full";
+  const widthPx =
+    typeof projectConfig.canvasWidthPx === "number" && projectConfig.canvasWidthPx > 0
+      ? projectConfig.canvasWidthPx
+      : null;
+
+  if (widthPx != null) {
+    canvasInnerStyle.maxWidth = `${widthPx}px`;
+  } else if (preset === "mobile") {
+    canvasInnerStyle.maxWidth = "390px";
+  } else if (preset === "tablet") {
+    canvasInnerStyle.maxWidth = "768px";
+  } else if (preset === "desktop") {
+    canvasInnerStyle.maxWidth = "1200px";
+  }
+
+  if (projectConfig.canvasBgColorHex && projectConfig.canvasBgColorHex.trim()) {
+    canvasInnerStyle.backgroundColor = projectConfig.canvasBgColorHex;
+  }
+
   return (
     <div
       className="flex-1 p-4 flex flex-col gap-2 text-sm text-slate-200 border-r border-slate-800 overflow-auto"
@@ -50,31 +73,37 @@ export function EditorCanvas(props: EditorCanvasProps) {
         }
       }}
     >
-      {blocks.length === 0 ? (
-        <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
-          왼쪽에서 "텍스트 블록 추가" 버튼을 눌러 블록을 추가해 보세요.
-        </div>
-      ) : (
-        <DndContext
-          sensors={sensors}
-          collisionDetection={rectIntersection}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-          onDragCancel={handleDragCancel}
-        >
-          <SortableContext
-            items={rootBlocks.map((b) => b.id)}
-            strategy={verticalListSortingStrategy}
+      <div
+        data-testid="editor-canvas-inner"
+        className="mx-auto w-full flex flex-col gap-2"
+        style={canvasInnerStyle}
+      >
+        {blocks.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
+            왼쪽에서 "텍스트 블록 추가" 버튼을 눌러 블록을 추가해 보세요.
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={rectIntersection}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDragCancel={handleDragCancel}
           >
-            {renderBlocks(rootBlocks)}
-          </SortableContext>
-          <DragOverlay>
-            {activeDragId && (
-              <DragPreview block={blocks.find((b) => b.id === activeDragId) ?? null} />
-            )}
-          </DragOverlay>
-        </DndContext>
-      )}
+            <SortableContext
+              items={rootBlocks.map((b) => b.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              {renderBlocks(rootBlocks)}
+            </SortableContext>
+            <DragOverlay>
+              {activeDragId && (
+                <DragPreview block={blocks.find((b) => b.id === activeDragId) ?? null} />
+              )}
+            </DragOverlay>
+          </DndContext>
+        )}
+      </div>
     </div>
   );
 }