디렉터리 페이지에서의 네트워크 호출 최적화

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

@@ -1,19 +1,10 @@
 <script lang="ts">
-  import { get } from "svelte/store";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
+  import { getUploadingFiles, clearUploadedFiles } from "$lib/modules/file";
   import File from "./File.svelte";
 
-  let uploadingFiles = $derived(
-    $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
-  );
-
-  $effect(() => () => {
-    $fileUploadStatusStore = $fileUploadStatusStore.filter((status) =>
-      isFileUploading(get(status).status),
-    );
-  });
+  $effect(() => clearUploadedFiles);
 </script>
 
 <svelte:head>
@@ -23,8 +14,8 @@
 <TopBar />
 <FullscreenDiv>
   <div class="space-y-2 pb-4">
-    {#each uploadingFiles as status}
-      <File {status} />
+    {#each getUploadingFiles() as file}
+      <File state={file} />
     {/each}
   </div>
 </FullscreenDiv>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { FileUploadStatus } from "$lib/stores";
+  import type { FileUploadState } from "$lib/modules/file";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconPending from "~icons/material-symbols/pending";
@@ -11,45 +10,45 @@
   import IconError from "~icons/material-symbols/error";
 
   interface Props {
-    status: Writable<FileUploadStatus>;
+    state: FileUploadState;
   }
 
-  let { status }: Props = $props();
+  let { state }: Props = $props();
 </script>
 
 <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 === "encryption-pending"}
+    {#if state.status === "encryption-pending"}
       <IconPending />
-    {:else if $status.status === "encrypting"}
+    {:else if state.status === "encrypting"}
       <IconLockClock />
-    {:else if $status.status === "upload-pending"}
+    {:else if state.status === "upload-pending"}
       <IconCloud />
-    {:else if $status.status === "uploading"}
+    {:else if state.status === "uploading"}
       <IconCloudUpload />
-    {:else if $status.status === "uploaded"}
+    {:else if state.status === "uploaded"}
       <IconCloudDone class="text-blue-500" />
-    {:else if $status.status === "error"}
+    {:else if state.status === "error"}
       <IconError class="text-red-500" />
     {/if}
   </div>
   <div class="flex-grow overflow-hidden">
-    <p title={$status.name} class="truncate font-medium">
-      {$status.name}
+    <p title={state.name} class="truncate font-medium">
+      {state.name}
     </p>
     <p class="text-xs text-gray-800">
-      {#if $status.status === "encryption-pending"}
+      {#if state.status === "encryption-pending"}
         준비 중
-      {:else if $status.status === "encrypting"}
+      {:else if state.status === "encrypting"}
         암호화하는 중
-      {:else if $status.status === "upload-pending"}
+      {:else if state.status === "upload-pending"}
         업로드를 기다리는 중
-      {:else if $status.status === "uploading"}
+      {:else if state.status === "uploading"}
         전송됨
-        {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed(($status.rate ?? 0) * 8)}
-      {:else if $status.status === "uploaded"}
+        {Math.floor((state.progress ?? 0) * 100)}% · {formatNetworkSpeed((state.rate ?? 0) * 8)}
+      {:else if state.status === "uploaded"}
         업로드 완료
-      {:else if $status.status === "error"}
+      {:else if state.status === "error"}
         업로드 실패
       {/if}
     </p>