파일 업로드/다운로드 현황을 모두 볼 수 있는 페이지 구현

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

@@ -87,7 +87,7 @@
 
 <div class="flex h-full flex-col">
   <TopBar title={$info?.name} />
-  <DownloadStatus info={downloadStatus} />
+  <DownloadStatus status={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">

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

@@ -1,31 +1,32 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { formatNetworkSpeed } from "$lib/modules/util";
   import type { FileDownloadStatus } from "$lib/stores";
-  import { formatDownloadProgress, formatDownloadRate } from "./service";
 
   interface Props {
-    info?: Writable<FileDownloadStatus>;
+    status?: Writable<FileDownloadStatus>;
   }
 
-  let { info }: Props = $props();
+  let { status }: Props = $props();
 </script>
 
-{#if $info && $info.status !== "decrypted" && $info.status !== "canceled" && $info.status !== "error"}
+{#if $status && $status.status !== "decrypted" && $status.status !== "canceled" && $status.status !== "error"}
   <div class="flex w-full flex-col rounded-xl bg-gray-100 p-3">
     <p class="font-medium">
-      {#if $info.status === "download-pending"}
+      {#if $status.status === "download-pending"}
         다운로드를 기다리는 중
-      {:else if $info.status === "downloading"}
+      {:else if $status.status === "downloading"}
         다운로드하는 중
-      {:else if $info.status === "decryption-pending"}
+      {:else if $status.status === "decryption-pending"}
         복호화를 기다리는 중
-      {:else if $info.status === "decrypting"}
+      {:else if $status.status === "decrypting"}
         복호화하는 중
       {/if}
     </p>
     <p class="text-xs">
-      {#if $info.status === "downloading"}
-        전송됨 {formatDownloadProgress($info.progress)} · {formatDownloadRate($info.rate)}
+      {#if $status.status === "downloading"}
+        전송됨
+        {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed($status.rate ?? 0)}
       {/if}
     </p>
   </div>

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,5 +1,4 @@
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
-import { formatFileSize } from "$lib/modules/util";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -13,11 +12,3 @@ export const requestFileDownload = async (
   storeFileCache(fileId, fileBuffer); // Intended
   return fileBuffer;
 };
-
-export const formatDownloadProgress = (progress?: number) => {
-  return `${Math.floor((progress ?? 0) * 100)}%`;
-};
-
-export const formatDownloadRate = (rate?: number) => {
-  return `${formatFileSize((rate ?? 0) / 8)}/s`;
-};