2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
3f43e41b 1 parent 81561c88

url 복사

Inline Side-by-side
Showing 4 changed files with 132 additions and 35 deletions
1 +declare module "*.svg" {
2 + // eslint-disable-next-line @typescript-eslint/no-explicit-any
3 + const content: any;
4 + export default content;
5 +}
...@@ -3,6 +3,8 @@ import styled from "styled-components"; ...@@ -3,6 +3,8 @@ import styled from "styled-components";
3 import TuiImageEditor from "tui-image-editor"; 3 import TuiImageEditor from "tui-image-editor";
4 import "gif-generator/dist/gif-generator"; 4 import "gif-generator/dist/gif-generator";
5 import { postGif } from "api"; 5 import { postGif } from "api";
6 +import Close from "public/close.svg";
7 +import Copy from "public/copy.svg";
6 8
7 declare global { 9 declare global {
8 interface Window { 10 interface Window {
...@@ -24,6 +26,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -24,6 +26,7 @@ const GifEditor = ({ previewURL }) => {
24 const [viewLink, setViewLink] = useState(null); 26 const [viewLink, setViewLink] = useState(null);
25 27
26 const [unableToUpload, setUnableToUpload] = useState(false); 28 const [unableToUpload, setUnableToUpload] = useState(false);
29 + const [isModalOpened, setIsModalOpened] = useState(false);
27 30
28 useEffect(() => { 31 useEffect(() => {
29 if (window) { 32 if (window) {
...@@ -62,6 +65,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -62,6 +65,7 @@ const GifEditor = ({ previewURL }) => {
62 setBlob(blob); 65 setBlob(blob);
63 if (blob.size > 5000000) setUnableToUpload(true); 66 if (blob.size > 5000000) setUnableToUpload(true);
64 setDownload(window.URL.createObjectURL(blob)); 67 setDownload(window.URL.createObjectURL(blob));
68 + setIsModalOpened(true);
65 }, 69 },
66 (error) => { 70 (error) => {
67 alert(error); 71 alert(error);
...@@ -80,38 +84,75 @@ const GifEditor = ({ previewURL }) => { ...@@ -80,38 +84,75 @@ const GifEditor = ({ previewURL }) => {
80 setViewLink(`https://gif-generator.bu.to/${res.id}`); 84 setViewLink(`https://gif-generator.bu.to/${res.id}`);
81 }; 85 };
82 86
87 + const handleCloseModal = () => {
88 + setIsModalOpened(false);
89 + setIsMakeStarted(false);
90 + setDownload(null);
91 + setPercent(0);
92 + setViewLink(null);
93 + };
94 +
95 + const clipboardCopy = (text: string) => {
96 + if (!document.queryCommandSupported("copy")) {
97 + return alert("클립보드가 지원되지 않는 브라우저입니다.");
98 + }
99 + const textarea = document.createElement("textarea");
100 + textarea.value = text;
101 + document.body.appendChild(textarea);
102 + // 사파리 브라우저 서포팅
103 + textarea.focus();
104 + // 사용자가 입력한 내용을 영역을 설정할 때 필요
105 + textarea.select();
106 + document.execCommand("copy");
107 + document.body.removeChild(textarea);
108 +
109 + return null;
110 + };
111 +
83 return ( 112 return (
84 <> 113 <>
85 <Wrapper> 114 <Wrapper>
86 {((isMakeStarted && !download) || isUploadLoading) && ( 115 {((isMakeStarted && !download) || isUploadLoading) && (
87 <> 116 <>
88 <div className="background" /> 117 <div className="background" />
118 + <div className="modal">
89 <div className="download"> 119 <div className="download">
90 loading... {!isUploadLoading && `${percent}%`} 120 loading... {!isUploadLoading && `${percent}%`}
91 </div> 121 </div>
122 + </div>
92 </> 123 </>
93 )} 124 )}
94 {!isUploadLoading && viewLink && ( 125 {!isUploadLoading && viewLink && (
95 - <div className="download" style={{ zIndex: 200 }}> 126 + <>
96 - <a href={viewLink}>{viewLink}</a> 127 + <div className="background" />
128 + <div className="modal">
129 + <div className="download">
130 + <div className="modal__close" onClick={handleCloseModal}>
131 + <Close />
132 + </div>
133 + <div className="download__explain">Click to Copy the Link!</div>
134 + <div
135 + className="download__copy"
136 + onClick={() => clipboardCopy(viewLink)}
137 + >
138 + {viewLink}
139 + <div style={{ marginLeft: "0.5rem" }}>
140 + <Copy />
141 + </div>
142 + </div>
97 </div> 143 </div>
144 + </div>
145 + </>
98 )} 146 )}
99 - {download && !isUploadLoading && ( 147 + {download && !isUploadLoading && isModalOpened && !viewLink && (
100 - // <>
101 - // <div className="background" />
102 - // <div className="download">
103 - // <div className={`download__btn ${unableToUpload && "unable"}`}>
104 - // <a href={download} download="new_gif.gif">
105 - // Download a File
106 - // </a>
107 - // </div>
108 - // <div className="download__btn">
109 - // <div onClick={handleUpload}>Upload to Server</div>
110 - // </div>
111 - // </div>
112 - // </>
113 <NextStepModal 148 <NextStepModal
114 - {...{ unableToUpload, download, handleUpload, blob }} 149 + {...{
150 + unableToUpload,
151 + download,
152 + handleUpload,
153 + blob,
154 + handleCloseModal,
155 + }}
115 /> 156 />
116 )} 157 )}
117 <div onClick={makeGif} className="make"> 158 <div onClick={makeGif} className="make">
...@@ -123,13 +164,22 @@ const GifEditor = ({ previewURL }) => { ...@@ -123,13 +164,22 @@ const GifEditor = ({ previewURL }) => {
123 ); 164 );
124 }; 165 };
125 166
126 -const NextStepModal = ({ unableToUpload, download, handleUpload, blob }) => { 167 +const NextStepModal = ({
168 + unableToUpload,
169 + download,
170 + handleUpload,
171 + blob,
172 + handleCloseModal,
173 +}) => {
127 const url = window.URL.createObjectURL(blob); 174 const url = window.URL.createObjectURL(blob);
128 return ( 175 return (
129 <ModalWrapper {...{ unableToUpload }}> 176 <ModalWrapper {...{ unableToUpload }}>
130 <div className="background" /> 177 <div className="background" />
131 <div className="modal"> 178 <div className="modal">
132 <div className="download"> 179 <div className="download">
180 + <div className="modal__close" onClick={handleCloseModal}>
181 + <Close />
182 + </div>
133 <img src={url} width={500} /> 183 <img src={url} width={500} />
134 <div className="buttons"> 184 <div className="buttons">
135 <div className="buttons__btn"> 185 <div className="buttons__btn">
...@@ -161,6 +211,63 @@ const Wrapper = styled.div` ...@@ -161,6 +211,63 @@ const Wrapper = styled.div`
161 display: flex; 211 display: flex;
162 flex-direction: column; 212 flex-direction: column;
163 align-items: center; 213 align-items: center;
214 + .background {
215 + position: fixed;
216 + top: 0;
217 + left: 0;
218 + width: 100%;
219 + height: 100vh;
220 + background-color: black;
221 + opacity: 0.7;
222 + z-index: 100;
223 + }
224 + .modal {
225 + width: 100%;
226 + height: 100vh;
227 + position: fixed;
228 + top: 0;
229 + left: 0;
230 + z-index: 100;
231 + display: flex;
232 + align-items: center;
233 + justify-content: center;
234 + background: transparent;
235 + &__close {
236 + cursor: pointer;
237 + position: absolute;
238 + width: 2.5rem;
239 + height: 2.5rem;
240 + background: white;
241 + border-radius: 50%;
242 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
243 + display: flex;
244 + align-items: center;
245 + justify-content: center;
246 + right: -0.7rem;
247 + top: -0.7rem;
248 + z-index: 103;
249 + }
250 + }
251 + .download {
252 + position: absolute;
253 + z-index: 100;
254 + background-color: white;
255 + padding: 1.5rem 2rem;
256 + border-radius: 2rem;
257 + &__explain {
258 + font-size: 1.2rem;
259 + margin-bottom: 0.5rem;
260 + font-weight: 800;
261 + }
262 + &__copy {
263 + cursor: pointer;
264 + display: flex;
265 + align-items: center;
266 + :hover {
267 + text-decoration: underline;
268 + }
269 + }
270 + }
164 a { 271 a {
165 color: black; 272 color: black;
166 text-decoration: none; 273 text-decoration: none;
...@@ -208,23 +315,6 @@ const Wrapper = styled.div` ...@@ -208,23 +315,6 @@ const Wrapper = styled.div`
208 `; 315 `;
209 316
210 const ModalWrapper = styled.div<{ unableToUpload: boolean }>` 317 const ModalWrapper = styled.div<{ unableToUpload: boolean }>`
211 - .background {
212 - position: fixed;
213 - top: 0;
214 - left: 0;
215 - width: 100%;
216 - height: 100vh;
217 - background-color: black;
218 - opacity: 0.7;
219 - z-index: 100;
220 - }
221 - .modal {
222 - width: 100%;
223 - height: 100vh;
224 - display: flex;
225 - align-items: center;
226 - justify-content: center;
227 - }
228 .download { 318 .download {
229 position: absolute; 319 position: absolute;
230 z-index: 100; 320 z-index: 100;
......
1 +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>
...\ No newline at end of file ...\ No newline at end of file
1 +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z"/></svg>
...\ No newline at end of file ...\ No newline at end of file