2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
f2f049d1 1 parent 09c2d5cb

업로드 예외처리

Inline Side-by-side
Showing 2 changed files with 24 additions and 4 deletions
This diff could not be displayed because it is too large.
...@@ -54,14 +54,25 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -54,14 +54,25 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
54 // } 54 // }
55 // }, [lowerCanvas?.toDataURL("image/png")]); 55 // }, [lowerCanvas?.toDataURL("image/png")]);
56 56
57 + const [alertIsShown, setAlertIsShown] = useState(false);
58 +
57 const handleEnd = () => { 59 const handleEnd = () => {
58 const lowerCanvas = document.getElementsByClassName( 60 const lowerCanvas = document.getElementsByClassName(
59 "lower-canvas" 61 "lower-canvas"
60 )[0] as HTMLCanvasElement; 62 )[0] as HTMLCanvasElement;
61 - setPreviewURL(lowerCanvas.toDataURL("image/png")); 63 + if (
62 - // console.log("asdf"); 64 + lowerCanvas.toDataURL("image/png") ===
63 - setIsImgAdded(true); 65 + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC"
64 - setIsEditorOpened(false); 66 + ) {
67 + setAlertIsShown(true);
68 + setTimeout(() => {
69 + setAlertIsShown(false);
70 + }, 1000);
71 + } else {
72 + setPreviewURL(lowerCanvas.toDataURL("image/png"));
73 + setIsImgAdded(true);
74 + setIsEditorOpened(false);
75 + }
65 }; 76 };
66 77
67 return ( 78 return (
...@@ -92,6 +103,9 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => { ...@@ -92,6 +103,9 @@ const ToastEditor = ({ setPreviewURL, setIsImgAdded, setIsEditorOpened }) => {
92 }} 103 }}
93 usageStatistics={true} 104 usageStatistics={true}
94 /> 105 />
106 + <div className="alert" style={{ opacity: alertIsShown ? 1 : 0 }}>
107 + Please select a photo.
108 + </div>
95 </Container> 109 </Container>
96 ); 110 );
97 }; 111 };
...@@ -122,6 +136,12 @@ const Container = styled.div` ...@@ -122,6 +136,12 @@ const Container = styled.div`
122 justify-content: center; 136 justify-content: center;
123 cursor: pointer; 137 cursor: pointer;
124 } 138 }
139 + .alert {
140 + position: fixed;
141 + border-radius: 0.5rem;
142 + transition: 1s;
143 + top: 7rem;
144 + }
125 .tui-image-editor-container { 145 .tui-image-editor-container {
126 border-radius: 1.5rem; 146 border-radius: 1.5rem;
127 } 147 }
......