이정민

Merge branch 'feat/web' into develop

No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
......@@ -3,9 +3,7 @@ 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;
};
......
......@@ -17,6 +17,7 @@ const GifEditor = ({ previewURL }) => {
const [download, setDownload] = useState(null);
const [blob, setBlob] = useState(null);
const [percent, setPercent] = useState(0);
const [isMakeStarted, setIsMakeStarted] = useState(false);
const [isUploadLoading, setIsUploadLoading] = useState(false);
......@@ -46,19 +47,16 @@ const GifEditor = ({ previewURL }) => {
}
}, []);
useEffect(() => {
if (imageEditor) {
console.log(imageEditor._graphics.getCanvas().getObjects());
}
}, [imageEditor]);
const makeGif = () => {
setIsMakeStarted(true);
const gifGenerator = new window.GifGenerator(
imageEditor._graphics.getCanvas()
);
gifGenerator.on("progress", (p: number) => {
setPercent(Math.round(p * 100));
});
gifGenerator.make().then(
(blob) => {
(blob: Blob) => {
setBlob(blob);
setDownload(window.URL.createObjectURL(blob));
},
......@@ -74,11 +72,9 @@ const GifEditor = ({ previewURL }) => {
const formData = new FormData();
formData.append("gif", file);
const res = await postGif(formData);
console.log(res);
setIsUploadLoading(false);
setViewLink(
`https://gif-generator.s3.ap-northeast-2.amazonaws.com//gif/${res.id}.gif`
);
setViewLink(`https://gif-generator.bu.to/${res.id}`);
};
return (
......@@ -87,7 +83,9 @@ const GifEditor = ({ previewURL }) => {
{((isMakeStarted && !download) || isUploadLoading) && (
<>
<div className="background" />
<div className="download">loading...</div>
<div className="download">
loading... {!isUploadLoading && percent}%
</div>
</>
)}
{!isUploadLoading && viewLink && (
......@@ -135,7 +133,7 @@ const Wrapper = styled.div`
.make {
font: 800 11.5px Arial;
position: absolute;
right: 0;
left: 0;
top: 0;
width: 120px;
height: 40px;
......@@ -148,6 +146,9 @@ const Wrapper = styled.div`
align-items: center;
justify-content: center;
cursor: pointer;
:hover {
text-decoration: underline;
}
}
.background {
position: fixed;
......@@ -172,6 +173,9 @@ const Wrapper = styled.div`
:last-child {
margin-left: 1rem;
}
:hover {
text-decoration: underline;
}
}
}
.tui-image-editor-container {
......@@ -187,6 +191,9 @@ const Wrapper = styled.div`
.tui-image-editor-header-buttons {
display: none;
}
.tui-image-editor-help-menu {
display: none;
}
`;
export default GifEditor;
......
......@@ -2,6 +2,7 @@
import ImageEditor from "@toast-ui/react-image-editor";
import { useState } from "react";
import styled from "styled-components";
import { media } from "styles/theme";
import "tui-image-editor/dist/tui-image-editor.css";
const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
......@@ -69,11 +70,10 @@ const Container = styled.div`
.move {
font: 800 11.5px Arial;
position: absolute;
right: 0;
top: 0;
left: 7.8rem;
width: 120px;
height: 40px;
background: red;
z-index: 10;
border-radius: 20px;
margin: 8px;
......@@ -82,6 +82,12 @@ const Container = styled.div`
align-items: center;
justify-content: center;
cursor: pointer;
:hover {
text-decoration: underline;
}
${media.tablet} {
left: 12.3rem;
}
}
.alert {
position: fixed;
......@@ -99,6 +105,12 @@ const Container = styled.div`
.tui-image-editor-header-logo {
display: none;
}
.tui-image-editor-help-menu {
display: none;
}
.tui-image-editor-header-buttons {
position: absolute;
}
`;
export default ToastEditor;
......
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8" />
<title>TUI Example</title>
<link
type="text/css"
href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
rel="stylesheet"
/>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet" />
<link type="text/css" href="./tui-image-editor.css" rel="stylesheet" />
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script
type="text/javascript"
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>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
></script>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
></script>
<script type="text/javascript"
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>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="./tui-image-editor.js"></script>
<script type="text/javascript" src="./black-theme.js"></script>
<script type="text/javascript" src="../../dist/gif-generator.js"></script>
......@@ -59,8 +48,6 @@
imageEditor.ui.resizeEditor();
};
console.log("imageeiasdfasdf", imageEditor);
let gifGenerator;
setTimeout(function () {
gifGenerator = new GifGenerator(imageEditor._graphics.getCanvas());
......@@ -77,8 +64,7 @@
);
}
</script>
<button
style="
<button style="
position: absolute;
top: 70px;
right: 70px;
......@@ -86,10 +72,9 @@
background: rgba(0, 0, 0, 0);
color: #fff;
padding: 10px 20px;
"
onClick="render();"
>
" onClick="render();">
GIF 생성
</button>
</body>
</body>
</html>
\ No newline at end of file
......
import GIF from "@dhdbstjr98/gif.js";
import { fabric } from "fabric";
import Component from "./components";
export class GifGenerator {
......@@ -52,10 +51,10 @@ export class GifGenerator {
const objs = [];
fabricObjs.map((fabricObj) => {
if (fabricObj.path !== undefined) {
if (fabricObj.path !== null) {
objs.push(new Component.Brush(fabricObj));
this.canvas.remove(fabricObj);
} else if (fabricObj.text !== undefined) {
} else if (fabricObj.text !== null) {
objs.push(new Component.Text(fabricObj));
this.canvas.remove(fabricObj);
}
......
import Header from "components/Header";
import { useRouter } from "next/dist/client/router";
import styled from "styled-components";
const Detail = () => {
const id = useRouter().query.id;
return (
<div>
<Container>
<Header />
<ImgBox>
<img
className="img"
src={`https://9davbjzey4.execute-api.ap-northeast-2.amazonaws.com/?id=${id}`}
/>
</div>
</ImgBox>
</Container>
);
};
const Container = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
`;
const ImgBox = styled.div`
position: relative;
max-width: 60%;
max-height: 60%;
background-color: white;
box-shadow: ${({ theme }) => theme.boxShadow.normal};
border-radius: 2rem;
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
display: flex;
padding: 3rem;
/* flex: 0.6; */
/* .sub-flex {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
:first-child {
border-right: 1px solid ${({ theme }) => theme.color.gray};
}
} */
.img {
max-width: 100%;
max-height: 100%;
}
`;
const Wrapper = styled.div`
width: 100%;
height: 100vh;
.box {
width: 90%;
border-radius: 1.5rem;
box-shadow: ${({ theme }) => theme.boxShadow.normal};
display: flex;
flex-direction: column;
align-items: center;
}
.img {
max-width: 90%;
max-height: 90%;
}
`;
export default Detail;
......