restore direct download when it's not NAVER/KAKAO in-app browser (#48)

package.json

@@ -14,13 +14,15 @@
     "@mui/material": "^6.1.1",
     "@tanstack/react-query": "^5.56.2",
     "dayjs": "^1.11.13",
+    "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^2.6.1",
     "i18next-resources-to-backend": "^1.2.1",
     "react": "^18.3.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
     "react-router-dom": "^6.26.2",
@@ -30,6 +32,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

src/components/atoms/button/Download.tsx

@@ -7,6 +7,9 @@ import Fab from "@mui/material/Fab";
 import { ModalType } from "../../../constants/enum";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import { useTranslation } from "react-i18next";
+import saveAs from "file-saver";
+import { isIOS } from "react-device-detect";
 
 const AnnounceSwal = withReactContent(Swal);
 
@@ -23,6 +26,7 @@ interface DownloadProps {
  * @param tag
  */
 const DownloadButton: React.FC<DownloadProps> = ({ tag }) => {
+  const { i18n } = useTranslation();
   const theme = useTheme();
   const { setModal, hideModal } = useModalStore();
 
@@ -40,30 +44,52 @@ const DownloadButton: React.FC<DownloadProps> = ({ tag }) => {
         ignoreElements: (element) => element.id === "downloader",
       });
 
-      const body = {
-        file: canvas.toDataURL("image/jpeg"),
-      };
-
-      const uploadURL = `https://api.haulrest.me/file/aecheck`;
-      const res = await fetch(uploadURL, {
-        method: "POST",
-        headers: {
-          "Access-Control-Allow-Origin": "*",
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${import.meta.env.VITE_API_KEY}`,
-        },
-        body: JSON.stringify(body),
-        signal: AbortSignal.timeout(15000),
-      });
-      const url = ((await res.json()) as APIResponse<string>).data;
-      const link = document.createElement("a");
-
-      document.body.appendChild(link);
-
-      link.href = url;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      link.click();
+      if (navigator.userAgent.match(/NAVER|KAKAOTALK/i)) {
+        Swal.fire({
+          title: "Data Migration",
+          html: `<p style="font-size: 14px;">${
+            i18n.language === "ko"
+              ? "인앱 브라우저는 서버에 파일을 업로드합니다."
+              : "Image will be downloaded after uploading to the server."
+          }</p>`,
+          width: 300,
+          showCancelButton: true,
+        }).then(async (result) => {
+          if (result.isConfirmed) {
+            const body = {
+              file: canvas.toDataURL("image/jpeg"),
+            };
+
+            const uploadURL = `https://api.haulrest.me/file/aecheck`;
+            const res = await fetch(uploadURL, {
+              method: "POST",
+              headers: {
+                "Access-Control-Allow-Origin": "*",
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${import.meta.env.VITE_API_KEY}`,
+              },
+              body: JSON.stringify(body),
+              signal: AbortSignal.timeout(15000),
+            });
+            const url = ((await res.json()) as APIResponse<string>).data;
+            const link = document.createElement("a");
+
+            document.body.appendChild(link);
+
+            link.href = url;
+            link.target = "_blank";
+            link.rel = "noopener noreferrer";
+            link.click();
+          }
+        });
+      } else {
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            return window.alert("!!!");
+          }
+          saveAs(blob, `${Date.now().toString()}${isIOS ? "" : ".jpg"}`);
+        });
+      }
     } catch {
       AnnounceSwal.fire({
         icon: "error",