사소한 리팩토링

src/lib/components/atoms/RowVirtualizer.svelte

@@ -8,10 +8,11 @@
     count: number;
     item: Snippet<[index: number]>;
     itemHeight: (index: number) => number;
+    itemGap?: number;
     placeholder?: Snippet;
   }
 
-  let { class: className, count, item, itemHeight, placeholder }: Props = $props();
+  let { class: className, count, item, itemHeight, itemGap, placeholder }: Props = $props();
 
   let element: HTMLElement | undefined = $state();
   let scrollMargin = $state(0);
@@ -20,6 +21,7 @@
     createWindowVirtualizer({
       count,
       estimateSize: itemHeight,
+      gap: itemGap,
       scrollMargin,
     }),
   );

src/lib/components/organisms/Category/Category.svelte

@@ -75,19 +75,14 @@
           <p class="font-medium">하위 카테고리의 파일</p>
         </CheckBox>
       </div>
-      <RowVirtualizer
+      <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
-        count={files.length}
-        itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
-      >
         {#snippet item(index)}
           {@const { details } = files[index]!}
-          <div class={[index + 1 < files.length && "pb-1"]}>
           <File
             info={details}
             onclick={onFileClick}
             onRemoveClick={!details.isRecursive ? onFileRemoveClick : undefined}
           />
-          </div>
         {/snippet}
         {#snippet placeholder()}
           <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>

src/lib/modules/file/upload.svelte.ts

@@ -46,7 +46,7 @@ const isFileUploading = (status: FileUploadState["status"]) =>
 
 export const getUploadingFiles = (parentId?: DirectoryId) => {
   return uploadingFiles.filter(
-    (file): file is LiveFileUploadState =>
+    (file) =>
       (parentId === undefined || file.parentId === parentId) && isFileUploading(file.status),
   );
 };

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

@@ -1,18 +1,29 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
+  import {
-  import { bulkGetFileInfo } from "$lib/modules/filesystem";
+    getDownloadingFiles,
+    clearDownloadedFiles,
+    type FileDownloadState,
+  } from "$lib/modules/file";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
-  const downloadingFiles = getDownloadingFiles();
+  let downloadingFiles: { info: MaybeFileInfo; state: FileDownloadState }[] = $state([]);
-  const filesPromise = $derived(
+
-    bulkGetFileInfo(
+  onMount(async () => {
-      downloadingFiles.map(({ id }) => id),
+    const states = getDownloadingFiles();
+    const infos = await bulkGetFileInfo(
+      states.map(({ id }) => id),
       $masterKeyStore?.get(1)?.key!,
-    ),
     );
+    downloadingFiles = states.map((state) => ({
+      info: infos.get(state.id)!,
+      state,
+    }));
+  });
 
   $effect(() => clearDownloadedFiles);
 </script>
@@ -23,14 +34,11 @@
 
 <TopBar />
 <FullscreenDiv>
-  {#await filesPromise then files}
   <div class="space-y-2 pb-4">
-      {#each downloadingFiles as state}
+    {#each downloadingFiles as { info, state } (info.id)}
-        {@const info = files.get(state.id)!}
       {#if info.exists}
-          <File {state} {info} />
+        <File {info} {state} />
       {/if}
     {/each}
   </div>
-  {/await}
 </FullscreenDiv>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FileDownloadState } from "$lib/modules/file";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconCloud from "~icons/material-symbols/cloud";
@@ -11,7 +11,7 @@
   import IconError from "~icons/material-symbols/error";
 
   interface Props {
-    info: FileInfo;
+    info: SummarizedFileInfo;
     state: FileDownloadState;
   }
 

src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte

@@ -33,31 +33,23 @@
 
   const toEntry =
     <T extends Exclude<Entry["type"], "parent">>(type: T) =>
-    (details: Extract<Entry, { type: T }>["details"]) => ({
+    (details: Extract<Entry, { type: T }>["details"]) => ({ type, name: details.name, details });
-      type,
-      name: details.name,
-      details,
-    });
 
   let entries = $derived([
     ...(showParentEntry ? ([{ type: "parent" }] as const) : []),
     ...sortEntries(info.subDirectories.map(toEntry("directory"))),
     ...sortEntries([
       ...info.files.map(toEntry("file")),
-      ...getUploadingFiles(info.id).map(toEntry("uploading-file")),
+      ...(getUploadingFiles(info.id) as LiveFileUploadState[]).map(toEntry("uploading-file")),
     ]),
   ]);
 </script>
 
 {#if entries.length > 0}
   <div class="pb-[4.5rem]">
-    <RowVirtualizer
+    <RowVirtualizer count={entries.length} itemHeight={() => 56} itemGap={4}>
-      count={entries.length}
-      itemHeight={(index) => 56 + (index + 1 < entries.length ? 4 : 0)}
-    >
       {#snippet item(index)}
         {@const entry = entries[index]!}
-        <div class={index + 1 < entries.length ? "pb-1" : ""}>
         {#if entry.type === "parent"}
           <ActionEntryButton class="h-14" onclick={onParentClick}>
             <DirectoryEntryLabel type="parent-directory" name=".." />
@@ -73,7 +65,6 @@
         {:else}
           <UploadingFile state={entry.details} />
         {/if}
-        </div>
       {/snippet}
     </RowVirtualizer>
   </div>