컴포넌트 구조 추가

+import ComponentInterface from "./ComponentInterface"
+import Color from "./Color"
+
+class Brush extends ComponentInterface {
+	constructor(fabricObj) {
+		super();
+		this.color = new Color(fabricObj.stroke);
+		this.paths = fabricObj.path;
+		this.size = fabricObj.strokeWidth;
+	}
+}
+
+export default Brush
\ No newline at end of file

+class Color {
+	constructor(colorData) {
+		if(colorData[0] == "#") {
+			this.r = parseInt(colorData.substring(1, 3), 16)
+			this.g = parseInt(colorData.substring(3, 5), 16)
+			this.b = parseInt(colorData.substring(5, 7), 16)
+			this.a = 1
+		} else {
+			const rgba = colorData.substring(5, colorData.length - 1).split(",");
+			this.r = parseInt(rgba[0]);
+			this.g = parseInt(rgba[1]);
+			this.b = parseInt(rgba[2]);
+			this.a = parseFloat(rgba[3]);
+		}
+	}
+}
+
+export default Color;
\ No newline at end of file

+class ComponentInterface {
+
+}
+
+export default ComponentInterface;
\ No newline at end of file

+import ComponentInterface from "./ComponentInterface"
+import Color from "./Color"
+
+class Text extends ComponentInterface {
+	constructor(fabricObj) {
+		super();
+		this.color = new Color(fabricObj.fill);
+		this.text = fabricObj.text;
+		this.position = {
+			top:fabricObj.top,
+			left:fabricObj.left
+		}
+		this.font = {
+			size:fabricObj.fontSize,
+			style:fabricObj.fontStyle,
+			weight:fabricObj.fontWeight,
+			family:fabricObj.fontFamily
+		}
+	}
+}
+
+export default Text
\ No newline at end of file

+import Brush from "./Brush"
+import Text from "./Text"
+
+const Component = {
+	Brush,
+	Text
+};
+
+export default Component;
\ No newline at end of file

 import GIF from "gifencoder";
 import GIF from "gifencoder";
+import {fabric} from "fabric"
+import Component from "./components";
 
 
 class GifGenerator {
 class GifGenerator {
   constructor(canvas) {
   constructor(canvas) {
@@ -13,17 +15,32 @@ class GifGenerator {
     this.gif.setQuality(10);
     this.gif.setQuality(10);
   }
   }
 
 
-  addFrame(delay = 0) {
+  _addFrame(delay = 0) {
     this.gif.setDelay(delay);
     this.gif.setDelay(delay);
     this.gif.addFrame(this.canvas.getContext());
     this.gif.addFrame(this.canvas.getContext());
   }
   }
 
 
-  render() {
+  _render() {
     this.gif.finish();
     this.gif.finish();
     const byte = new Uint8Array(this.gif.out.data);
     const byte = new Uint8Array(this.gif.out.data);
 
 
     return new Blob([byte], { type: "image/gif" });
     return new Blob([byte], { type: "image/gif" });
   }
   }
+
+  make() {
+    const fabricObjs = this.canvas.getObjects();
+    const objs = [];
+    
+    fabricObjs.map((fabricObj) => {
+      if(fabricObj instanceof fabric.Path) {
+        objs.push(new Component.Brush(fabricObj))
+      } else if(fabricObj.text !== undefined) {
+        objs.push(new Component.Text(fabricObj))
+      }
+    })
+
+    console.log(objs);
+  }
 }
 }
 
 
 window.GifGenerator = GifGenerator;
 window.GifGenerator = GifGenerator;