파일 크기 제한

@@ -23,6 +23,8 @@ const GifEditor = ({ previewURL }) => {
   const [isUploadLoading, setIsUploadLoading] = useState(false);
   const [viewLink, setViewLink] = useState(null);
 
+  const [unableToUpload, setUnableToUpload] = useState(false);
+
   useEffect(() => {
     if (window) {
       setImageEditor(
@@ -58,6 +60,7 @@ const GifEditor = ({ previewURL }) => {
     gifGenerator.make().then(
       (blob: Blob) => {
         setBlob(blob);
+        if (blob.size > 5000000) setUnableToUpload(true);
         setDownload(window.URL.createObjectURL(blob));
       },
       (error) => {
@@ -84,7 +87,7 @@ const GifEditor = ({ previewURL }) => {
           <>
             <div className="background" />
             <div className="download">
-              loading... {!isUploadLoading && percent}%
+              loading... {!isUploadLoading && `${percent}%`}
             </div>
           </>
         )}
@@ -94,19 +97,22 @@ const GifEditor = ({ previewURL }) => {
           </div>
         )}
         {download && !isUploadLoading && (
-          <>
-            <div className="background" />
-            <div className="download">
-              <div className="download__btn">
-                <a href={download} download="new_gif.gif">
-                  Download a File
-                </a>
-              </div>
-              <div className="download__btn">
-                <div onClick={handleUpload}>Upload to Server</div>
-              </div>
-            </div>
-          </>
+          // <>
+          //   <div className="background" />
+          //   <div className="download">
+          //     <div className={`download__btn ${unableToUpload && "unable"}`}>
+          //       <a href={download} download="new_gif.gif">
+          //         Download a File
+          //       </a>
+          //     </div>
+          //     <div className="download__btn">
+          //       <div onClick={handleUpload}>Upload to Server</div>
+          //     </div>
+          //   </div>
+          // </>
+          <NextStepModal
+            {...{ unableToUpload, download, handleUpload, blob }}
+          />
         )}
         <div onClick={makeGif} className="make">
           Make a Gif
@@ -117,6 +123,35 @@ const GifEditor = ({ previewURL }) => {
   );
 };
 
+const NextStepModal = ({ unableToUpload, download, handleUpload, blob }) => {
+  const url = window.URL.createObjectURL(blob);
+  return (
+    <ModalWrapper {...{ unableToUpload }}>
+      <div className="background" />
+      <div className="modal">
+        <div className="download">
+          <img src={url} width={500} />
+          <div className="buttons">
+            <div className="buttons__btn">
+              <a href={download} download="new_gif.gif">
+                Download a File
+              </a>
+            </div>
+            <div className="buttons__btn">
+              <div onClick={!unableToUpload && handleUpload}>
+                Upload to Server
+              </div>
+            </div>
+          </div>
+          {unableToUpload && (
+            <div className="warning">5MB 미만만 업로드 가능합니다!</div>
+          )}
+        </div>
+      </div>
+    </ModalWrapper>
+  );
+};
+
 const Wrapper = styled.div`
   position: fixed;
   width: 90%;
@@ -130,6 +165,10 @@ const Wrapper = styled.div`
     color: black;
     text-decoration: none;
   }
+  .unable {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
   .make {
     font: 800 11.5px Arial;
     position: absolute;
@@ -137,7 +176,6 @@ const Wrapper = styled.div`
     top: 0;
     width: 120px;
     height: 40px;
-    background: red;
     z-index: 10;
     border-radius: 20px;
     margin: 8px;
@@ -150,6 +188,26 @@ const Wrapper = styled.div`
       text-decoration: underline;
     }
   }
+
+  .tui-image-editor-container {
+    border-radius: 1.5rem;
+  }
+  .tui-image-editor-container .tui-image-editor-help-menu.top {
+    left: 19rem;
+    top: 1rem;
+  }
+  .tui-image-editor-header-logo {
+    display: none;
+  }
+  .tui-image-editor-header-buttons {
+    display: none;
+  }
+  .tui-image-editor-help-menu {
+    display: none;
+  }
+`;
+
+const ModalWrapper = styled.div<{ unableToUpload: boolean }>`
   .background {
     position: fixed;
     top: 0;
@@ -160,40 +218,57 @@ const Wrapper = styled.div`
     opacity: 0.7;
     z-index: 100;
   }
+  .modal {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .download {
     position: absolute;
-    top: 15rem;
     z-index: 100;
-    display: flex;
     background-color: white;
     padding: 1.5rem 2rem;
     border-radius: 2rem;
+  }
+  .warning {
+    box-sizing: border-box;
+    padding-right: 1rem;
+    width: 100%;
+    text-align: end;
+    margin-top: 1rem;
+  }
+  .buttons {
+    display: flex;
+    flex: 1;
+    margin-top: 1rem;
     &__btn {
+      flex: 0.5;
+      text-align: center;
+      cursor: pointer;
+      border-radius: 2rem;
+      padding: 1.5rem;
+      background-color: #fdba3b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      :last-child {
-        margin-left: 1rem;
-      }
       :hover {
         text-decoration: underline;
       }
+      :last-child {
+        margin-left: 1rem;
+        cursor: ${({ unableToUpload }) =>
+          unableToUpload ? "not-allowed" : "pointer"};
+        :hover {
+          text-decoration: ${({ unableToUpload }) =>
+            !unableToUpload ? "underline" : "none"};
+        }
+        opacity: ${({ unableToUpload }) => unableToUpload && 0.5};
+      }
     }
   }
-  .tui-image-editor-container {
-    border-radius: 1.5rem;
-  }
-  .tui-image-editor-container .tui-image-editor-help-menu.top {
-    left: 19rem;
-    top: 1rem;
-  }
-  .tui-image-editor-header-logo {
-    display: none;
-  }
-  .tui-image-editor-header-buttons {
-    display: none;
-  }
-  .tui-image-editor-help-menu {
-    display: none;
-  }
 `;
 
 export default GifEditor;

@@ -6,6 +6,7 @@ const Header = () => {
 
 const Container = styled.div`
   position: fixed;
+  box-sizing: border-box;
   top: 0;
   left: 0;
   width: 100%;