add setting

src/pages/editor/components/EditorCanvas.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Stage, Layer, Rect } from "react-konva";
+import { Stage, Layer, Rect, Image as KonvaImage } from "react-konva";
+import useImage from "use-image";
 import Konva from "konva";
 import { useEditorStore } from "../store/editorStore";
 import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
@@ -39,10 +40,38 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     setLayerRef,
     setGuides,
     zoom,
+    documentSettings,
   } = useEditorStore();
 
-  const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
+  const bgColor =
+    documentSettings.backgroundType === 'color'
+      ? documentSettings.backgroundColor
+      : '#ffffff';
+
+  const [bgImage] = useImage(
+    documentSettings.backgroundType === 'image'
+      ? documentSettings.backgroundImageUrl
+      : '',
+  );
   const stageSize = useStageSize(catalogSize);
+  const bgImageCrop = (() => {
+    if (!bgImage) return null;
+
+    const containerRatio = stageSize.width / stageSize.height;
+    const imageRatio = bgImage.width / bgImage.height;
+
+    if (imageRatio > containerRatio) {
+      const cropWidth = bgImage.height * containerRatio;
+      const cropX = (bgImage.width - cropWidth) / 2;
+      return { x: cropX, y: 0, width: cropWidth, height: bgImage.height };
+    }
+
+    const cropHeight = bgImage.width / containerRatio;
+    const cropY = (bgImage.height - cropHeight) / 2;
+    return { x: 0, y: cropY, width: bgImage.width, height: cropHeight };
+  })();
+
+  const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
   useKeyboardMovement();
 
   const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
@@ -362,9 +391,20 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                   y={0}
                   width={stageSize.width}
                   height={stageSize.height}
-                  fill="#ffffff"
+                  fill={bgColor}
                   listening={false}
                 />
+                {documentSettings.backgroundType === 'image' && bgImage && (
+                  <KonvaImage
+                    image={bgImage}
+                    x={0}
+                    y={0}
+                    width={stageSize.width}
+                    height={stageSize.height}
+                    crop={bgImageCrop ?? undefined}
+                    listening={false}
+                  />
+                )}
               </Layer>
 
               <ObjectsLayer