Merge branch 'feat/web' into develop

+declare module "*.svg" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const content: any;
+  export default content;
+}

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import TuiImageEditor from "tui-image-editor";
 import "gif-generator/dist/gif-generator";
 import { postGif } from "api";
+import Close from "public/close.svg";
+import Copy from "public/copy.svg";
 
 declare global {
   interface Window {
@@ -23,6 +25,9 @@ const GifEditor = ({ previewURL }) => {
   const [isUploadLoading, setIsUploadLoading] = useState(false);
   const [viewLink, setViewLink] = useState(null);
 
+  const [unableToUpload, setUnableToUpload] = useState(false);
+  const [isModalOpened, setIsModalOpened] = useState(false);
+
   useEffect(() => {
     if (window) {
       setImageEditor(
@@ -58,7 +63,9 @@ const GifEditor = ({ previewURL }) => {
     gifGenerator.make().then(
       (blob: Blob) => {
         setBlob(blob);
+        if (blob.size > 5000000) setUnableToUpload(true);
         setDownload(window.URL.createObjectURL(blob));
+        setIsModalOpened(true);
       },
       (error) => {
         alert(error);
@@ -77,37 +84,77 @@ const GifEditor = ({ previewURL }) => {
     setViewLink(`https://gif-generator.bu.to/${res.id}`);
   };
 
+  const handleCloseModal = () => {
+    setIsModalOpened(false);
+    setIsMakeStarted(false);
+    setDownload(null);
+    setPercent(0);
+    setViewLink(null);
+  };
+
+  const clipboardCopy = (text: string) => {
+    if (!document.queryCommandSupported("copy")) {
+      return alert("클립보드가 지원되지 않는 브라우저입니다.");
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    // 사파리 브라우저 서포팅
+    textarea.focus();
+    // 사용자가 입력한 내용을 영역을 설정할 때 필요
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+
+    return null;
+  };
+
   return (
     <>
       <Wrapper>
         {((isMakeStarted && !download) || isUploadLoading) && (
           <>
             <div className="background" />
-            <div className="download">
-              loading... {!isUploadLoading && percent}%
+            <div className="modal">
+              <div className="download">
+                loading... {!isUploadLoading && `${percent}%`}
+              </div>
             </div>
           </>
         )}
         {!isUploadLoading && viewLink && (
-          <div className="download" style={{ zIndex: 200 }}>
-            <a href={viewLink}>{viewLink}</a>
-          </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 className="modal">
+              <div className="download">
+                <div className="modal__close" onClick={handleCloseModal}>
+                  <Close />
+                </div>
+                <div className="download__explain">Click to Copy the Link!</div>
+                <div
+                  className="download__copy"
+                  onClick={() => clipboardCopy(viewLink)}
+                >
+                  {viewLink}
+                  <div style={{ marginLeft: "0.5rem" }}>
+                    <Copy />
+                  </div>
+                </div>
               </div>
             </div>
           </>
         )}
+        {download && !isUploadLoading && isModalOpened && !viewLink && (
+          <NextStepModal
+            {...{
+              unableToUpload,
+              download,
+              handleUpload,
+              blob,
+              handleCloseModal,
+            }}
+          />
+        )}
         <div onClick={makeGif} className="make">
           Make a Gif
         </div>
@@ -117,6 +164,44 @@ const GifEditor = ({ previewURL }) => {
   );
 };
 
+const NextStepModal = ({
+  unableToUpload,
+  download,
+  handleUpload,
+  blob,
+  handleCloseModal,
+}) => {
+  const url = window.URL.createObjectURL(blob);
+  return (
+    <ModalWrapper {...{ unableToUpload }}>
+      <div className="background" />
+      <div className="modal">
+        <div className="download">
+          <div className="modal__close" onClick={handleCloseModal}>
+            <Close />
+          </div>
+          <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%;
@@ -126,10 +211,71 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: black;
+    opacity: 0.7;
+    z-index: 100;
+  }
+  .modal {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      width: 2.5rem;
+      height: 2.5rem;
+      background: white;
+      border-radius: 50%;
+      box-shadow: ${({ theme }) => theme.boxShadow.normal};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      right: -0.7rem;
+      top: -0.7rem;
+      z-index: 103;
+    }
+  }
+  .download {
+    position: absolute;
+    z-index: 100;
+    background-color: white;
+    padding: 1.5rem 2rem;
+    border-radius: 2rem;
+    &__explain {
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+      font-weight: 800;
+    }
+    &__copy {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
   a {
     color: black;
     text-decoration: none;
   }
+  .unable {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
   .make {
     font: 800 11.5px Arial;
     position: absolute;
@@ -137,7 +283,6 @@ const Wrapper = styled.div`
     top: 0;
     width: 120px;
     height: 40px;
-    background: red;
     z-index: 10;
     border-radius: 20px;
     margin: 8px;
@@ -150,34 +295,7 @@ const Wrapper = styled.div`
       text-decoration: underline;
     }
   }
-  .background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: black;
-    opacity: 0.7;
-    z-index: 100;
-  }
-  .download {
-    position: absolute;
-    top: 15rem;
-    z-index: 100;
-    display: flex;
-    background-color: white;
-    padding: 1.5rem 2rem;
-    border-radius: 2rem;
-    &__btn {
-      cursor: pointer;
-      :last-child {
-        margin-left: 1rem;
-      }
-      :hover {
-        text-decoration: underline;
-      }
-    }
-  }
+
   .tui-image-editor-container {
     border-radius: 1.5rem;
   }
@@ -196,4 +314,51 @@ const Wrapper = styled.div`
   }
 `;
 
+const ModalWrapper = styled.div<{ unableToUpload: boolean }>`
+  .download {
+    position: absolute;
+    z-index: 100;
+    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;
+      :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};
+      }
+    }
+  }
+`;
+
 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%;

+<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

+<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