2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
0ec5ba95 2 parents 03dde13c 07e8e402

Merge branch 'develop'

Inline Side-by-side
Showing 6 changed files with 178 additions and 111 deletions
...@@ -3,9 +3,7 @@ import axios from "axios"; ...@@ -3,9 +3,7 @@ import axios from "axios";
3 const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com"; 3 const baseURL = "https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com";
4 4
5 export const postGif = async (formData) => { 5 export const postGif = async (formData) => {
6 - console.log("file", formData);
7 const { data } = await axios.post(baseURL, formData); 6 const { data } = await axios.post(baseURL, formData);
8 -
9 return data; 7 return data;
10 }; 8 };
11 9
......
...@@ -17,6 +17,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -17,6 +17,7 @@ const GifEditor = ({ previewURL }) => {
17 17
18 const [download, setDownload] = useState(null); 18 const [download, setDownload] = useState(null);
19 const [blob, setBlob] = useState(null); 19 const [blob, setBlob] = useState(null);
20 + const [percent, setPercent] = useState(0);
20 21
21 const [isMakeStarted, setIsMakeStarted] = useState(false); 22 const [isMakeStarted, setIsMakeStarted] = useState(false);
22 const [isUploadLoading, setIsUploadLoading] = useState(false); 23 const [isUploadLoading, setIsUploadLoading] = useState(false);
...@@ -46,19 +47,16 @@ const GifEditor = ({ previewURL }) => { ...@@ -46,19 +47,16 @@ const GifEditor = ({ previewURL }) => {
46 } 47 }
47 }, []); 48 }, []);
48 49
49 - useEffect(() => {
50 - if (imageEditor) {
51 - console.log(imageEditor._graphics.getCanvas().getObjects());
52 - }
53 - }, [imageEditor]);
54 -
55 const makeGif = () => { 50 const makeGif = () => {
56 setIsMakeStarted(true); 51 setIsMakeStarted(true);
57 const gifGenerator = new window.GifGenerator( 52 const gifGenerator = new window.GifGenerator(
58 imageEditor._graphics.getCanvas() 53 imageEditor._graphics.getCanvas()
59 ); 54 );
55 + gifGenerator.on("progress", (p: number) => {
56 + setPercent(Math.round(p * 100));
57 + });
60 gifGenerator.make().then( 58 gifGenerator.make().then(
61 - (blob) => { 59 + (blob: Blob) => {
62 setBlob(blob); 60 setBlob(blob);
63 setDownload(window.URL.createObjectURL(blob)); 61 setDownload(window.URL.createObjectURL(blob));
64 }, 62 },
...@@ -74,11 +72,9 @@ const GifEditor = ({ previewURL }) => { ...@@ -74,11 +72,9 @@ const GifEditor = ({ previewURL }) => {
74 const formData = new FormData(); 72 const formData = new FormData();
75 formData.append("gif", file); 73 formData.append("gif", file);
76 const res = await postGif(formData); 74 const res = await postGif(formData);
77 - console.log(res); 75 +
78 setIsUploadLoading(false); 76 setIsUploadLoading(false);
79 - setViewLink( 77 + setViewLink(`https://gif-generator.bu.to/${res.id}`);
80 - `https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif`
81 - );
82 }; 78 };
83 79
84 return ( 80 return (
...@@ -87,7 +83,9 @@ const GifEditor = ({ previewURL }) => { ...@@ -87,7 +83,9 @@ const GifEditor = ({ previewURL }) => {
87 {((isMakeStarted && !download) || isUploadLoading) && ( 83 {((isMakeStarted && !download) || isUploadLoading) && (
88 <> 84 <>
89 <div className="background" /> 85 <div className="background" />
90 - <div className="download">loading...</div> 86 + <div className="download">
87 + loading... {!isUploadLoading && percent}%
88 + </div>
91 </> 89 </>
92 )} 90 )}
93 {!isUploadLoading && viewLink && ( 91 {!isUploadLoading && viewLink && (
...@@ -135,7 +133,7 @@ const Wrapper = styled.div` ...@@ -135,7 +133,7 @@ const Wrapper = styled.div`
135 .make { 133 .make {
136 font: 800 11.5px Arial; 134 font: 800 11.5px Arial;
137 position: absolute; 135 position: absolute;
138 - right: 0; 136 + left: 0;
139 top: 0; 137 top: 0;
140 width: 120px; 138 width: 120px;
141 height: 40px; 139 height: 40px;
...@@ -148,6 +146,9 @@ const Wrapper = styled.div` ...@@ -148,6 +146,9 @@ const Wrapper = styled.div`
148 align-items: center; 146 align-items: center;
149 justify-content: center; 147 justify-content: center;
150 cursor: pointer; 148 cursor: pointer;
149 + :hover {
150 + text-decoration: underline;
151 + }
151 } 152 }
152 .background { 153 .background {
153 position: fixed; 154 position: fixed;
...@@ -172,6 +173,9 @@ const Wrapper = styled.div` ...@@ -172,6 +173,9 @@ const Wrapper = styled.div`
172 :last-child { 173 :last-child {
173 margin-left: 1rem; 174 margin-left: 1rem;
174 } 175 }
176 + :hover {
177 + text-decoration: underline;
178 + }
175 } 179 }
176 } 180 }
177 .tui-image-editor-container { 181 .tui-image-editor-container {
...@@ -187,6 +191,9 @@ const Wrapper = styled.div` ...@@ -187,6 +191,9 @@ const Wrapper = styled.div`
187 .tui-image-editor-header-buttons { 191 .tui-image-editor-header-buttons {
188 display: none; 192 display: none;
189 } 193 }
194 + .tui-image-editor-help-menu {
195 + display: none;
196 + }
190 `; 197 `;
191 198
192 export default GifEditor; 199 export default GifEditor;
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 import ImageEditor from "@toast-ui/react-image-editor"; 2 import ImageEditor from "@toast-ui/react-image-editor";
3 import { useState } from "react"; 3 import { useState } from "react";
4 import styled from "styled-components"; 4 import styled from "styled-components";
5 +import { media } from "styles/theme";
5 import "tui-image-editor/dist/tui-image-editor.css"; 6 import "tui-image-editor/dist/tui-image-editor.css";
6 7
7 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { 8 const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
...@@ -69,11 +70,10 @@ const Container = styled.div` ...@@ -69,11 +70,10 @@ const Container = styled.div`
69 .move { 70 .move {
70 font: 800 11.5px Arial; 71 font: 800 11.5px Arial;
71 position: absolute; 72 position: absolute;
72 - right: 0;
73 top: 0; 73 top: 0;
74 + left: 7.8rem;
74 width: 120px; 75 width: 120px;
75 height: 40px; 76 height: 40px;
76 - background: red;
77 z-index: 10; 77 z-index: 10;
78 border-radius: 20px; 78 border-radius: 20px;
79 margin: 8px; 79 margin: 8px;
...@@ -82,6 +82,12 @@ const Container = styled.div` ...@@ -82,6 +82,12 @@ const Container = styled.div`
82 align-items: center; 82 align-items: center;
83 justify-content: center; 83 justify-content: center;
84 cursor: pointer; 84 cursor: pointer;
85 + :hover {
86 + text-decoration: underline;
87 + }
88 + ${media.tablet} {
89 + left: 12.3rem;
90 + }
85 } 91 }
86 .alert { 92 .alert {
87 position: fixed; 93 position: fixed;
...@@ -99,6 +105,12 @@ const Container = styled.div` ...@@ -99,6 +105,12 @@ const Container = styled.div`
99 .tui-image-editor-header-logo { 105 .tui-image-editor-header-logo {
100 display: none; 106 display: none;
101 } 107 }
108 + .tui-image-editor-help-menu {
109 + display: none;
110 + }
111 + .tui-image-editor-header-buttons {
112 + position: absolute;
113 + }
102 `; 114 `;
103 115
104 export default ToastEditor; 116 export default ToastEditor;
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head>
4 - <meta charset="UTF-8" />
5 - <title>TUI Example</title>
6 - <link
7 - type="text/css"
8 - href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
9 - rel="stylesheet"
10 - />
11 - <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
12 - <style>
13 - @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
14 - html,
15 - body {
16 - height: 100%;
17 - margin: 0;
18 - }
19 - </style>
20 - </head>
21 - <body>
22 - <div id="tui-image-editor-container"></div>
23 - <script
24 - type="text/javascript"
25 - src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
26 - ></script>
27 - <script
28 - type="text/javascript"
29 - src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
30 - ></script>
31 - <script
32 - type="text/javascript"
33 - src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
34 - ></script>
35 - <script
36 - type="text/javascript"
37 - src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
38 - ></script>
39 - <script type="text/javascript" src="./tui-image-editor.js"></script>
40 - <script type="text/javascript" src="./black-theme.js"></script>
41 - <script type="text/javascript" src="../../dist/gif-generator.js"></script>
42 - <script>
43 - // Image editor
44 - var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
45 - includeUI: {
46 - loadImage: {
47 - path: "./sampleImage2.png",
48 - name: "SampleImage",
49 - },
50 - theme: blackTheme, // or whiteTheme
51 - initMenu: "filter",
52 - menuBarPosition: "bottom",
53 - },
54 - cssMaxWidth: 700,
55 - cssMaxHeight: 500,
56 - usageStatistics: false,
57 - });
58 - window.onresize = function () {
59 - imageEditor.ui.resizeEditor();
60 - };
61 3
62 - console.log("imageeiasdfasdf", imageEditor); 4 +<head>
5 + <meta charset="UTF-8" />
6 + <title>TUI Example</title>
7 + <link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
8 + <link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
9 + <style>
10 + @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
11 +
12 + html,
13 + body {
14 + height: 100%;
15 + margin: 0;
16 + }
17 + </style>
18 +</head>
19 +
20 +<body>
21 + <div id="tui-image-editor-container"></div>
22 + <script type="text/javascript"
23 + src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script>
24 + <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
25 + <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
26 + <script type="text/javascript"
27 + src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
28 + <script type="text/javascript" src="./tui-image-editor.js"></script>
29 + <script type="text/javascript" src="./black-theme.js"></script>
30 + <script type="text/javascript" src="../../dist/gif-generator.js"></script>
31 + <script>
32 + // Image editor
33 + var imageEditor = new tui.ImageEditor("#tui-image-editor-container", {
34 + includeUI: {
35 + loadImage: {
36 + path: "./sampleImage2.png",
37 + name: "SampleImage",
38 + },
39 + theme: blackTheme, // or whiteTheme
40 + initMenu: "filter",
41 + menuBarPosition: "bottom",
42 + },
43 + cssMaxWidth: 700,
44 + cssMaxHeight: 500,
45 + usageStatistics: false,
46 + });
47 + window.onresize = function () {
48 + imageEditor.ui.resizeEditor();
49 + };
63 50
64 - let gifGenerator; 51 + let gifGenerator;
65 - setTimeout(function () { 52 + setTimeout(function () {
66 - gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas()); 53 + gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
67 - gifGenerator.on("progress", (p) => console.log(p)); 54 + gifGenerator.on("progress", (p) => console.log(p));
68 - }, 1000); 55 + }, 1000);
69 - function render() { 56 + function render() {
70 - gifGenerator.make().then( 57 + gifGenerator.make().then(
71 - (blob) => { 58 + (blob) => {
72 - window.open(window.URL.createObjectURL(blob)); 59 + window.open(window.URL.createObjectURL(blob));
73 - }, 60 + },
74 - (error) => { 61 + (error) => {
75 - alert(error); 62 + alert(error);
76 - } 63 + }
77 - ); 64 + );
78 - } 65 + }
79 - </script> 66 + </script>
80 - <button 67 + <button style="
81 - style="
82 position: absolute; 68 position: absolute;
83 top: 70px; 69 top: 70px;
84 right: 70px; 70 right: 70px;
...@@ -86,10 +72,9 @@ ...@@ -86,10 +72,9 @@
86 background: rgba(0, 0, 0, 0); 72 background: rgba(0, 0, 0, 0);
87 color: #fff; 73 color: #fff;
88 padding: 10px 20px; 74 padding: 10px 20px;
89 - " 75 + " onClick="render();">
90 - onClick="render();" 76 + GIF 생성
91 - > 77 + </button>
92 - GIF 생성 78 +</body>
93 - </button> 79 +
94 - </body> 80 +</html>
95 -</html>
...\ No newline at end of file ...\ No newline at end of file
......
1 import GIF from "@dhdbstjr98/gif.js"; 1 import GIF from "@dhdbstjr98/gif.js";
2 -import { fabric } from "fabric";
3 import Component from "./components"; 2 import Component from "./components";
4 3
5 export class GifGenerator { 4 export class GifGenerator {
...@@ -18,7 +17,8 @@ export class GifGenerator { ...@@ -18,7 +17,8 @@ export class GifGenerator {
18 height: this.height, 17 height: this.height,
19 transparent: null, 18 transparent: null,
20 repeat: 0, 19 repeat: 0,
21 - setQuality: 10, 20 + workers: 8,
21 + setQuality: 20,
22 }); 22 });
23 23
24 Object.keys(this.events).map((event) => { 24 Object.keys(this.events).map((event) => {
...@@ -51,10 +51,10 @@ export class GifGenerator { ...@@ -51,10 +51,10 @@ export class GifGenerator {
51 const objs = []; 51 const objs = [];
52 52
53 fabricObjs.map((fabricObj) => { 53 fabricObjs.map((fabricObj) => {
54 - if (fabricObj.path !== undefined) { 54 + if (fabricObj.path !== null) {
55 objs.push(new Component.Brush(fabricObj)); 55 objs.push(new Component.Brush(fabricObj));
56 this.canvas.remove(fabricObj); 56 this.canvas.remove(fabricObj);
57 - } else if (fabricObj.text !== undefined) { 57 + } else if (fabricObj.text !== null) {
58 objs.push(new Component.Text(fabricObj)); 58 objs.push(new Component.Text(fabricObj));
59 this.canvas.remove(fabricObj); 59 this.canvas.remove(fabricObj);
60 } 60 }
......
1 +import Header from "components/Header";
1 import { useRouter } from "next/dist/client/router"; 2 import { useRouter } from "next/dist/client/router";
3 +import styled from "styled-components";
2 4
3 const Detail = () => { 5 const Detail = () => {
4 const id = useRouter().query.id; 6 const id = useRouter().query.id;
5 -
6 return ( 7 return (
7 - <div> 8 + <Container>
8 - <img 9 + <Header />
9 - src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`} 10 + <ImgBox>
10 - /> 11 + <img
11 - </div> 12 + className="img"
13 + src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
14 + />
15 + </ImgBox>
16 + </Container>
12 ); 17 );
13 }; 18 };
14 19
20 +const Container = styled.div`
21 + position: fixed;
22 + top: 0;
23 + left: 0;
24 + width: 100%;
25 + height: 100vh;
26 + overflow: hidden;
27 + display: flex;
28 + align-items: center;
29 + justify-content: center;
30 +`;
31 +const ImgBox = styled.div`
32 + position: relative;
33 + max-width: 60%;
34 + max-height: 60%;
35 + background-color: white;
36 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
37 + border-radius: 2rem;
38 + margin-top: 2rem;
39 + display: flex;
40 + align-items: center;
41 + justify-content: center;
42 + font-size: 1rem;
43 + display: flex;
44 + padding: 3rem;
45 + /* flex: 0.6; */
46 + /* .sub-flex {
47 + position: relative;
48 + width: 100%;
49 + height: 100%;
50 + display: flex;
51 + align-items: center;
52 + justify-content: center;
53 + :first-child {
54 + border-right: 1px solid ${({ theme }) => theme.color.gray};
55 + }
56 + } */
57 + .img {
58 + max-width: 100%;
59 + max-height: 100%;
60 + }
61 +`;
62 +
63 +const Wrapper = styled.div`
64 + width: 100%;
65 + height: 100vh;
66 + .box {
67 + width: 90%;
68 + border-radius: 1.5rem;
69 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
70 + display: flex;
71 + flex-direction: column;
72 + align-items: center;
73 + }
74 + .img {
75 + max-width: 90%;
76 + max-height: 90%;
77 + }
78 +`;
79 +
15 export default Detail; 80 export default Detail;
......