image-ai/package.json

@@ -12,8 +12,6 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "fabric": "5.3.0-browser",
-    "jsdom": "^25.0.1",
     "lucide-react": "^0.453.0",
     "next": "15.0.0",
     "react": "19.0.0-rc-65a56d0e-20241020",
@@ -22,14 +20,13 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/fabric": "5.3.0",
+    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "eslint": "^8",
+    "eslint-config-next": "15.0.0"
   }
 }

image-ai/src/app/blog/page.tsx

@@ -0,0 +1,9 @@
+const BlogPage = () => {
+    return ( 
+        <div>
+            Blog Page
+        </div>
+     );
+};
+ 
+export default BlogPage; // 이 부분을 작성하지 않으면 오류가 발생합니다.

image-ai/src/app/editor/[projectId]/page.tsx

@@ -1,7 +0,0 @@
-import { Editor } from "@/features/editor/components/editor";
-
-const EditorprojectIdPage = () => {
-    return <Editor />;
-};
-
-export default EditorprojectIdPage;

image-ai/src/app/globals.css

@@ -2,9 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
+body {
-boby{
+  font-family: Arial, Helvetica, sans-serif;
-  height: 100%;
 }
 
 @layer base {

image-ai/src/app/page.tsx

@@ -6,6 +6,7 @@ export default function Home() {
       <Button size ="sm">
         Click me!
       </Button>
+      Hello World!
     </div>
   );
 };

image-ai/src/features/editor/components/editor.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { fabric } from "fabric";
-import { useEditor } from "@/features/editor/hooks/use-editor";
-import { useEffect, useRef } from "react";
-
-export const Editor = () => {
-  const { init } = useEditor();
-
-  const canvasRef = useRef(null);
-  const ContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const canvas = new fabric.Canvas(canvasRef.current, {
-      controlsAboveOverlay: true,
-      preserveObjectStacking: true,
-    });
-    
-    init({
-      initialCanvas: canvas,
-      initialContainer: ContainerRef.current!,
-    });
-  }, [init]);
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="flex-1 h-full bg-muted" ref={ContainerRef}>
-        <canvas ref={canvasRef} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,55 +0,0 @@
-import { fabric } from "fabric";
-import { useCallback } from "react";
-
-export const useEditor = () => {
-    const init = useCallback(({
-        initialCanvas,
-        initialContainer, //이부분 개빡치네 왜 안되는거야
-    }: {
-        initialCanvas: fabric.Canvas;
-        initialContainer: HTMLDivElement,
-    }) => {
-        fabric.Object.prototype.set({
-            cornerColor: "#FFF",
-            cornerStyle: "circle",
-            borderColor: "#3b82f6",
-            borderScaleFactor: 1.5,
-            transparentCorners: false,
-            borderOpacityWhenMoving: 1,
-            cornerStrokeColor: "#3b82f6",
-        })
-
-        const initialWorkspace = new fabric.Rect({
-            width: 900,
-            height: 1200,
-            name: "clip",
-            fill: "white",
-            selectable: false,
-            hasControls: false,
-            shadow: new fabric.Shadow({
-                color: "rgba(0,0,0,0.8)",
-                blur: 5,
-            })
-        })
-
-        initialCanvas.setWidth(900); //시부레 initialContainer.offsetWidth로 하면 왜 안되는거야
-        initialCanvas.setHeight(1200);
-
-        initialCanvas.add(initialWorkspace);
-        initialCanvas.centerObject(initialWorkspace);
-        initialCanvas.clipPath = initialWorkspace; // clip the canvas to the workspace
-
-        const test = new fabric.Rect({
-            height: 100,
-            width: 100,
-            fill: "black",
-        });
-        
-        initialCanvas.add(test);
-        initialCanvas.centerObject(test);
-    },
-    []
-);
-
-    return { init };
-};