api 연동

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "@toast-ui/react-image-editor": "3.14.2",
     "@types/fabric": "^4.2.5",
+    "axios": "^0.21.1",
     "fabric": "^4.4.0",
     "next": "^10.0.5",
     "react": "^17.0.2",

+import axios from "axios";
+
+const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com";
+
+export const postGif = async (formData) => {
+  console.log("file", formData);
+  const { data } = await axios.post(baseURL, formData);
+
+  return data;
+};
+
+export const getGif = async (id) => {
+  const { data } = await axios.get(baseURL, {
+    params: {
+      id: id,
+    },
+  });
+
+  return data;
+};

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import TuiImageEditor from "tui-image-editor";
 import "gif-generator/dist/gif-generator";
+import { getGif, postGif } from "api";
 
 const GifEditor = ({ previewURL }) => {
   // const [canvas, setCanvas] = useState<HTMLCanvasElement>();
@@ -10,6 +11,9 @@ const GifEditor = ({ previewURL }) => {
 
   const rootEl = useRef();
 
+  const [download, setDownload] = useState(null);
+  const [blob, setBlob] = useState(null);
+
   useEffect(() => {
     // if (window) {
     //   setCanvas(
@@ -59,15 +63,17 @@ const GifEditor = ({ previewURL }) => {
     const gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
     gifGenerator.make().then(
       (blob) => {
-        console.log("blob", blob);
-        console.log(window.URL.createObjectURL(blob));
-        window.open(window.URL.createObjectURL(blob));
+        setBlob(blob);
+        console.log("blobaaa", blob);
+        // console.log(window.URL.createObjectURL(blob));
+        setDownload(window.URL.createObjectURL(blob));
       },
       (error) => {
         alert(error);
       }
     );
   };
+  //localhost:3000/f431b497-4ece-46d4-8708-8b1703d21b6e
 
   // useEffect(() => {
   //   // if (canvas) setGifGenerator(new GifGenerator(canvas._graphics.getCanvas()));
@@ -106,10 +112,25 @@ const GifEditor = ({ previewURL }) => {
   //     // console.log(canvas.getContext("2d"));
   //   }
   // }, [canvas]);
+  const handleUpload = async () => {
+    const file = new File([blob], "file.gif");
+    const formData = new FormData();
+    formData.append("gif", file);
+    const res = await postGif(formData);
+    console.log(res);
+  };
 
   return (
     <>
       <Wrapper>
+        {download && (
+          <div style={{ display: "flex" }}>
+            <a href={download} download="new_file_name.gif">
+              download
+            </a>
+            <div onClick={handleUpload}>server upload</div>
+          </div>
+        )}
         <div onClick={render} className="upload">
           Save
         </div>
@@ -150,7 +171,7 @@ const GifEditor = ({ previewURL }) => {
 const Wrapper = styled.div`
   position: fixed;
   width: 90%;
-  top: 10rem;
+  top: 15rem;
   border-radius: 1.5rem;
   box-shadow: ${({ theme }) => theme.boxShadow.normal};
   display: flex;

+import { getGif } from "api";
+import { useRouter } from "next/dist/client/router";
+import { useEffect, useState } from "react";
+
+const Detail = () => {
+  const id = useRouter().query.id;
+
+  return (
+    <div>
+      <img
+        src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
+      />
+    </div>
+  );
+};
+
+export default Detail;

@@ -1856,6 +1856,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -3184,6 +3191,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"