파일 페이지에서의 네트워크 호출 최적화

src/routes/(fullscreen)/file/downloads/+page.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-  import { get } from "svelte/store";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
+  import { getFileInfo } from "$lib/modules/filesystem2.svelte";
+  import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
+  import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
-  let downloadingFiles = $derived(
-    $fileDownloadStatusStore.filter((status) => isFileDownloading(get(status).status)),
+  let downloadingFilesPromise = $derived(
+    Promise.all(
+      getDownloadingFiles().map(async (file) => ({
+        state: file,
+        fileInfo: await getFileInfo(file.id, $masterKeyStore?.get(1)?.key!),
+      })),
+    ),
   );
 
-  $effect(() => () => {
-    $fileDownloadStatusStore = $fileDownloadStatusStore.filter((status) =>
-      isFileDownloading(get(status).status),
-    );
-  });
+  $effect(() => clearDownloadedFiles);
 </script>
 
 <svelte:head>
@@ -22,9 +24,9 @@
 
 <TopBar />
 <FullscreenDiv>
-  <div class="space-y-2 pb-4">
-    {#each downloadingFiles as status}
-      <File {status} />
+  {#await downloadingFilesPromise then downloadingFiles}
+    {#each downloadingFiles as { state, fileInfo }}
+      <File {state} info={fileInfo} />
     {/each}
-  </div>
+  {/await}
 </FullscreenDiv>

src/routes/(fullscreen)/file/downloads/File.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { get, type Writable } from "svelte/store";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore, type FileDownloadStatus } from "$lib/stores";
+  import type { FileDownloadState } from "$lib/modules/file";
+  import type { FileInfo } from "$lib/modules/filesystem2.svelte";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconCloud from "~icons/material-symbols/cloud";
@@ -12,56 +11,49 @@
   import IconError from "~icons/material-symbols/error";
 
   interface Props {
-    status: Writable<FileDownloadStatus>;
+    info: FileInfo;
+    state: FileDownloadState;
   }
 
-  let { status }: Props = $props();
-
-  let fileInfo: Writable<FileInfo | null> | undefined = $state();
-
-  $effect(() => {
-    fileInfo = getFileInfo(get(status).id, $masterKeyStore?.get(1)?.key!);
-  });
+  let { info, state }: Props = $props();
 </script>
 
-{#if $fileInfo}
-  <div class="flex h-14 items-center gap-x-4 p-2">
-    <div class="flex-shrink-0 text-lg text-gray-600">
-      {#if $status.status === "download-pending"}
-        <IconCloud />
-      {:else if $status.status === "downloading"}
-        <IconCloudDownload />
-      {:else if $status.status === "decryption-pending"}
-        <IconLock />
-      {:else if $status.status === "decrypting"}
-        <IconLockClock />
-      {:else if $status.status === "decrypted"}
-        <IconCheckCircle class="text-green-500" />
-      {:else if $status.status === "error"}
-        <IconError class="text-red-500" />
-      {/if}
-    </div>
-    <div class="flex-grow overflow-hidden">
-      <p title={$fileInfo.name} class="truncate font-medium">
-        {$fileInfo.name}
-      </p>
-      <p class="text-xs text-gray-800">
-        {#if $status.status === "download-pending"}
-          다운로드를 기다리는 중
-        {:else if $status.status === "downloading"}
-          전송됨
-          {Math.floor(($status.progress ?? 0) * 100)}% ·
-          {formatNetworkSpeed(($status.rate ?? 0) * 8)}
-        {:else if $status.status === "decryption-pending"}
-          복호화를 기다리는 중
-        {:else if $status.status === "decrypting"}
-          복호화하는 중
-        {:else if $status.status === "decrypted"}
-          다운로드 완료
-        {:else if $status.status === "error"}
-          다운로드 실패
-        {/if}
-      </p>
-    </div>
+<div class="flex h-14 items-center gap-x-4 p-2">
+  <div class="flex-shrink-0 text-lg text-gray-600">
+    {#if state.status === "download-pending"}
+      <IconCloud />
+    {:else if state.status === "downloading"}
+      <IconCloudDownload />
+    {:else if state.status === "decryption-pending"}
+      <IconLock />
+    {:else if state.status === "decrypting"}
+      <IconLockClock />
+    {:else if state.status === "decrypted"}
+      <IconCheckCircle class="text-green-500" />
+    {:else if state.status === "error"}
+      <IconError class="text-red-500" />
+    {/if}
   </div>
-{/if}
+  <div class="flex-grow overflow-hidden">
+    <p title={info.name} class="truncate font-medium">
+      {info.name}
+    </p>
+    <p class="text-xs text-gray-800">
+      {#if state.status === "download-pending"}
+        다운로드를 기다리는 중
+      {:else if state.status === "downloading"}
+        전송됨
+        {Math.floor((state.progress ?? 0) * 100)}% ·
+        {formatNetworkSpeed((state.rate ?? 0) * 8)}
+      {:else if state.status === "decryption-pending"}
+        복호화를 기다리는 중
+      {:else if state.status === "decrypting"}
+        복호화하는 중
+      {:else if state.status === "decrypted"}
+        다운로드 완료
+      {:else if state.status === "error"}
+        다운로드 실패
+      {/if}
+    </p>
+  </div>
+</div>