반응형

image-ai/src/features/editor/hooks/use-editor.ts

@@ -2,8 +2,13 @@ import { fabric } from "fabric";
 import { useCallback, useState } from "react";
 import { useAutoResize } from "./use-auto-resize";
 
+
+interface UseEditorProps {
+    initialCanvas: fabric.Canvas;
+    initialContainer: HTMLDivElement;
+}
 export const useEditor = () => {
-    const[canvas, setCanvas] = useState(null);
+    const[canvas, setCanvas] = useState<fabric.Canvas | null>(null);
     const[container, setContatiner] = useState<HTMLDivElement | null>(null);
 
     useAutoResize({
@@ -11,10 +16,8 @@ export const useEditor = () => {
         container,
     });
     
-    const init = useCallback(({ initialCanvas,initialContainer}: {
+    const init = useCallback(
-        initialCanvas: fabric.Canvas;
+        ({initialCanvas,initialContainer}: UseEditorProps) => {
-        initialContainer: HTMLDivElement,
-    }) => {
         fabric.Object.prototype.set({
             cornerColor: "#FFF",
             cornerStyle: "circle",
@@ -23,7 +26,8 @@ export const useEditor = () => {
             transparentCorners: false,
             borderOpacityWhenMoving: 1,
             cornerStrokeColor: "#3b82f6",
-        })
+        }
+    )
 
         const initialWorkspace = new fabric.Rect({
             width: 900,
@@ -34,7 +38,7 @@ export const useEditor = () => {
             hasControls: false,
             shadow: new fabric.Shadow({
                 color: "rgba(0,0,0,0.8)",
-                blur: 5,
+                blur: 5
             })
         })
 
@@ -57,8 +61,7 @@ export const useEditor = () => {
         initialCanvas.add(test);
         initialCanvas.centerObject(test);
     },
-    []
+    []);
-);
 
     return { init };
 };