2021-1-capstone-design1 / MAC_Project1

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

파일 크기 제한

Inline Side-by-side
Showing 2 changed files with 112 additions and 36 deletions
...@@ -23,6 +23,8 @@ const GifEditor = ({ previewURL }) => { ...@@ -23,6 +23,8 @@ const GifEditor = ({ previewURL }) => {
23 const [isUploadLoading, setIsUploadLoading] = useState(false); 23 const [isUploadLoading, setIsUploadLoading] = useState(false);
24 const [viewLink, setViewLink] = useState(null); 24 const [viewLink, setViewLink] = useState(null);
25 25
26 + const [unableToUpload, setUnableToUpload] = useState(false);
27 +
26 useEffect(() => { 28 useEffect(() => {
27 if (window) { 29 if (window) {
28 setImageEditor( 30 setImageEditor(
...@@ -58,6 +60,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -58,6 +60,7 @@ const GifEditor = ({ previewURL }) => {
58 gifGenerator.make().then( 60 gifGenerator.make().then(
59 (blob: Blob) => { 61 (blob: Blob) => {
60 setBlob(blob); 62 setBlob(blob);
63 + if (blob.size > 5000000) setUnableToUpload(true);
61 setDownload(window.URL.createObjectURL(blob)); 64 setDownload(window.URL.createObjectURL(blob));
62 }, 65 },
63 (error) => { 66 (error) => {
...@@ -84,7 +87,7 @@ const GifEditor = ({ previewURL }) => { ...@@ -84,7 +87,7 @@ const GifEditor = ({ previewURL }) => {
84 <> 87 <>
85 <div className="background" /> 88 <div className="background" />
86 <div className="download"> 89 <div className="download">
87 - loading... {!isUploadLoading && percent}% 90 + loading... {!isUploadLoading && `${percent}%`}
88 </div> 91 </div>
89 </> 92 </>
90 )} 93 )}
...@@ -94,19 +97,22 @@ const GifEditor = ({ previewURL }) => { ...@@ -94,19 +97,22 @@ const GifEditor = ({ previewURL }) => {
94 </div> 97 </div>
95 )} 98 )}
96 {download && !isUploadLoading && ( 99 {download && !isUploadLoading && (
97 - <> 100 + // <>
98 - <div className="background" /> 101 + // <div className="background" />
99 - <div className="download"> 102 + // <div className="download">
100 - <div className="download__btn"> 103 + // <div className={`download__btn ${unableToUpload && "unable"}`}>
101 - <a href={download} download="new_gif.gif"> 104 + // <a href={download} download="new_gif.gif">
102 - Download a File 105 + // Download a File
103 - </a> 106 + // </a>
104 - </div> 107 + // </div>
105 - <div className="download__btn"> 108 + // <div className="download__btn">
106 - <div onClick={handleUpload}>Upload to Server</div> 109 + // <div onClick={handleUpload}>Upload to Server</div>
107 - </div> 110 + // </div>
108 - </div> 111 + // </div>
109 - </> 112 + // </>
113 + <NextStepModal
114 + {...{ unableToUpload, download, handleUpload, blob }}
115 + />
110 )} 116 )}
111 <div onClick={makeGif} className="make"> 117 <div onClick={makeGif} className="make">
112 Make a Gif 118 Make a Gif
...@@ -117,6 +123,35 @@ const GifEditor = ({ previewURL }) => { ...@@ -117,6 +123,35 @@ const GifEditor = ({ previewURL }) => {
117 ); 123 );
118 }; 124 };
119 125
126 +const NextStepModal = ({ unableToUpload, download, handleUpload, blob }) => {
127 + const url = window.URL.createObjectURL(blob);
128 + return (
129 + <ModalWrapper {...{ unableToUpload }}>
130 + <div className="background" />
131 + <div className="modal">
132 + <div className="download">
133 + <img src={url} width={500} />
134 + <div className="buttons">
135 + <div className="buttons__btn">
136 + <a href={download} download="new_gif.gif">
137 + Download a File
138 + </a>
139 + </div>
140 + <div className="buttons__btn">
141 + <div onClick={!unableToUpload && handleUpload}>
142 + Upload to Server
143 + </div>
144 + </div>
145 + </div>
146 + {unableToUpload && (
147 + <div className="warning">5MB 미만만 업로드 가능합니다!</div>
148 + )}
149 + </div>
150 + </div>
151 + </ModalWrapper>
152 + );
153 +};
154 +
120 const Wrapper = styled.div` 155 const Wrapper = styled.div`
121 position: fixed; 156 position: fixed;
122 width: 90%; 157 width: 90%;
...@@ -130,6 +165,10 @@ const Wrapper = styled.div` ...@@ -130,6 +165,10 @@ const Wrapper = styled.div`
130 color: black; 165 color: black;
131 text-decoration: none; 166 text-decoration: none;
132 } 167 }
168 + .unable {
169 + cursor: not-allowed;
170 + opacity: 0.5;
171 + }
133 .make { 172 .make {
134 font: 800 11.5px Arial; 173 font: 800 11.5px Arial;
135 position: absolute; 174 position: absolute;
...@@ -137,7 +176,6 @@ const Wrapper = styled.div` ...@@ -137,7 +176,6 @@ const Wrapper = styled.div`
137 top: 0; 176 top: 0;
138 width: 120px; 177 width: 120px;
139 height: 40px; 178 height: 40px;
140 - background: red;
141 z-index: 10; 179 z-index: 10;
142 border-radius: 20px; 180 border-radius: 20px;
143 margin: 8px; 181 margin: 8px;
...@@ -150,6 +188,26 @@ const Wrapper = styled.div` ...@@ -150,6 +188,26 @@ const Wrapper = styled.div`
150 text-decoration: underline; 188 text-decoration: underline;
151 } 189 }
152 } 190 }
191 +
192 + .tui-image-editor-container {
193 + border-radius: 1.5rem;
194 + }
195 + .tui-image-editor-container .tui-image-editor-help-menu.top {
196 + left: 19rem;
197 + top: 1rem;
198 + }
199 + .tui-image-editor-header-logo {
200 + display: none;
201 + }
202 + .tui-image-editor-header-buttons {
203 + display: none;
204 + }
205 + .tui-image-editor-help-menu {
206 + display: none;
207 + }
208 +`;
209 +
210 +const ModalWrapper = styled.div<{ unableToUpload: boolean }>`
153 .background { 211 .background {
154 position: fixed; 212 position: fixed;
155 top: 0; 213 top: 0;
...@@ -160,40 +218,57 @@ const Wrapper = styled.div` ...@@ -160,40 +218,57 @@ const Wrapper = styled.div`
160 opacity: 0.7; 218 opacity: 0.7;
161 z-index: 100; 219 z-index: 100;
162 } 220 }
221 + .modal {
222 + width: 100%;
223 + height: 100vh;
224 + display: flex;
225 + align-items: center;
226 + justify-content: center;
227 + }
163 .download { 228 .download {
164 position: absolute; 229 position: absolute;
165 - top: 15rem;
166 z-index: 100; 230 z-index: 100;
167 - display: flex;
168 background-color: white; 231 background-color: white;
169 padding: 1.5rem 2rem; 232 padding: 1.5rem 2rem;
170 border-radius: 2rem; 233 border-radius: 2rem;
234 + }
235 + .warning {
236 + box-sizing: border-box;
237 + padding-right: 1rem;
238 + width: 100%;
239 + text-align: end;
240 + margin-top: 1rem;
241 + }
242 + .buttons {
243 + display: flex;
244 + flex: 1;
245 + margin-top: 1rem;
171 &__btn { 246 &__btn {
247 + flex: 0.5;
248 + text-align: center;
249 + cursor: pointer;
250 + border-radius: 2rem;
251 + padding: 1.5rem;
252 + background-color: #fdba3b;
253 + display: flex;
254 + align-items: center;
255 + justify-content: center;
172 cursor: pointer; 256 cursor: pointer;
173 - :last-child {
174 - margin-left: 1rem;
175 - }
176 :hover { 257 :hover {
177 text-decoration: underline; 258 text-decoration: underline;
178 } 259 }
260 + :last-child {
261 + margin-left: 1rem;
262 + cursor: ${({ unableToUpload }) =>
263 + unableToUpload ? "not-allowed" : "pointer"};
264 + :hover {
265 + text-decoration: ${({ unableToUpload }) =>
266 + !unableToUpload ? "underline" : "none"};
267 + }
268 + opacity: ${({ unableToUpload }) => unableToUpload && 0.5};
269 + }
179 } 270 }
180 } 271 }
181 - .tui-image-editor-container {
182 - border-radius: 1.5rem;
183 - }
184 - .tui-image-editor-container .tui-image-editor-help-menu.top {
185 - left: 19rem;
186 - top: 1rem;
187 - }
188 - .tui-image-editor-header-logo {
189 - display: none;
190 - }
191 - .tui-image-editor-header-buttons {
192 - display: none;
193 - }
194 - .tui-image-editor-help-menu {
195 - display: none;
196 - }
197 `; 272 `;
198 273
199 export default GifEditor; 274 export default GifEditor;
......
...@@ -6,6 +6,7 @@ const Header = () => { ...@@ -6,6 +6,7 @@ const Header = () => {
6 6
7 const Container = styled.div` 7 const Container = styled.div`
8 position: fixed; 8 position: fixed;
9 + box-sizing: border-box;
9 top: 0; 10 top: 0;
10 left: 0; 11 left: 0;
11 width: 100%; 12 width: 100%;
......