파일 다운로드 스케쥴링 및 진행률 표시 기능 구현

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -1,66 +1,84 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { untrack } from "svelte";
-  import type { Writable } from "svelte/store";
+  import { get, type Writable } from "svelte/store";
   import { TopBar } from "$lib/components";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
+  import { fileDownloadStatusStore, masterKeyStore } from "$lib/stores";
+  import DownloadStatus from "./DownloadStatus.svelte";
   import { requestFileDownload } from "./service";
 
-  type ContentType = "image" | "video";
-
   let { data } = $props();
 
   let info: Writable<FileInfo | null> | undefined = $state();
-  let isDownloaded = $state(false);
 
-  let content: Blob | undefined = $state();
-  let contentUrl: string | undefined = $state();
-  let contentType: ContentType | undefined = $state();
+  const downloadStatus = $derived(
+    $fileDownloadStatusStore.find((statusStore) => {
+      const status = get(statusStore);
+      return (
+        status.id === data.id &&
+        (status.status === "download-pending" ||
+          status.status === "downloading" ||
+          status.status === "decryption-pending" ||
+          status.status === "decrypting")
+      );
+    }),
+  );
+
+  let isDownloadRequested = $state(false);
+  let viewerType: "image" | "video" | undefined = $state();
+  let fileBlobUrl: string | undefined = $state();
+
+  const updateViewer = async (info: FileInfo, buffer: ArrayBuffer) => {
+    const contentType = info.contentType;
+    if (contentType.startsWith("image")) {
+      viewerType = "image";
+    } else if (contentType.startsWith("video")) {
+      viewerType = "video";
+    }
+
+    const fileBlob = new Blob([buffer], { type: contentType });
+    if (contentType === "image/heic") {
+      const { default: heic2any } = await import("heic2any");
+      fileBlobUrl = URL.createObjectURL(
+        (await heic2any({ blob: fileBlob, toType: "image/jpeg" })) as Blob,
+      );
+    } else if (viewerType) {
+      fileBlobUrl = URL.createObjectURL(fileBlob);
+    }
+
+    return fileBlob;
+  };
 
   $effect(() => {
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!);
-    isDownloaded = false;
-
-    content = undefined;
-    contentType = undefined;
+    isDownloadRequested = false;
+    viewerType = undefined;
   });
 
   $effect(() => {
-    if ($info?.contentIv && $info?.dataKey && !isDownloaded) {
+    if ($info && $info.dataKey && $info.contentIv) {
       untrack(() => {
-        isDownloaded = true;
-
-        if ($info.contentType.startsWith("image")) {
-          contentType = "image";
-        } else if ($info.contentType.startsWith("video")) {
-          contentType = "video";
+        if (!downloadStatus && !isDownloadRequested) {
+          isDownloadRequested = true;
+          requestFileDownload(data.id, $info.contentIv!, $info.dataKey!).then(async (buffer) => {
+            const blob = await updateViewer($info, buffer);
+            if (!viewerType) {
+              FileSaver.saveAs(blob, $info.name);
+            }
+          });
         }
-
-        requestFileDownload(data.id, $info.contentIv!, $info.dataKey!).then(async (res) => {
-          content = new Blob([res], { type: $info.contentType });
-          if (content.type === "image/heic" || content.type === "image/heif") {
-            const { default: heic2any } = await import("heic2any");
-            contentUrl = URL.createObjectURL(
-              (await heic2any({ blob: content, toType: "image/jpeg" })) as Blob,
-            );
-          } else if (contentType) {
-            contentUrl = URL.createObjectURL(content);
-          } else {
-            FileSaver.saveAs(content, $info.name);
-          }
-        });
       });
     }
   });
 
   $effect(() => {
-    return () => {
-      if (contentUrl) {
-        URL.revokeObjectURL(contentUrl);
-      }
-    };
+    if ($info && $downloadStatus?.status === "decrypted") {
+      untrack(() => !isDownloadRequested && updateViewer($info, $downloadStatus.result!));
+    }
   });
+
+  $effect(() => () => fileBlobUrl && URL.revokeObjectURL(fileBlobUrl));
 </script>
 
 <svelte:head>
@@ -69,23 +87,24 @@
 
 <div class="flex h-full flex-col">
   <TopBar title={$info?.name} />
-  <div class="mb-4 flex w-full flex-grow flex-col items-center">
+  <DownloadStatus info={downloadStatus} />
+  <div class="flex w-full flex-grow flex-col items-center pb-4">
     {#snippet viewerLoading(message: string)}
       <div class="flex flex-grow items-center justify-center">
         <p class="text-gray-500">{message}</p>
       </div>
     {/snippet}
 
-    {#if $info && contentType === "image"}
-      {#if contentUrl}
-        <img src={contentUrl} alt={$info.name} />
+    {#if $info && viewerType === "image"}
+      {#if fileBlobUrl}
+        <img src={fileBlobUrl} alt={$info.name} />
       {:else}
         {@render viewerLoading("이미지를 불러오고 있어요.")}
       {/if}
-    {:else if contentType === "video"}
-      {#if contentUrl}
+    {:else if viewerType === "video"}
+      {#if fileBlobUrl}
         <!-- svelte-ignore a11y_media_has_caption -->
-        <video src={contentUrl} controls></video>
+        <video src={fileBlobUrl} controls></video>
       {:else}
         {@render viewerLoading("비디오를 불러오고 있어요.")}
       {/if}