From d1f9018213f6550f36ba7150c822a22b285a45d7 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 2 Jan 2026 00:31:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=86=8C=ED=95=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/atoms/RowVirtualizer.svelte    |  4 +-
 .../organisms/Category/Category.svelte        | 17 +++----
 src/lib/modules/file/upload.svelte.ts         |  2 +-
 .../(fullscreen)/file/downloads/+page.svelte  | 44 ++++++++++--------
 .../(fullscreen)/file/downloads/File.svelte   |  4 +-
 .../DirectoryEntries/DirectoryEntries.svelte  | 45 ++++++++-----------
 6 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/lib/components/atoms/RowVirtualizer.svelte b/src/lib/components/atoms/RowVirtualizer.svelte
index aa68bd2..444b9c7 100644
--- a/src/lib/components/atoms/RowVirtualizer.svelte
+++ b/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,
     }),
   );
diff --git a/src/lib/components/organisms/Category/Category.svelte b/src/lib/components/organisms/Category/Category.svelte
index 3728f5f..6482a16 100644
--- a/src/lib/components/organisms/Category/Category.svelte
+++ b/src/lib/components/organisms/Category/Category.svelte
@@ -75,19 +75,14 @@
           <p class="font-medium">하위 카테고리의 파일</p>
         </CheckBox>
       </div>
-      <RowVirtualizer
-        count={files.length}
-        itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
-      >
+      <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
         {#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>
+          <File
+            info={details}
+            onclick={onFileClick}
+            onRemoveClick={!details.isRecursive ? onFileRemoveClick : undefined}
+          />
         {/snippet}
         {#snippet placeholder()}
           <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
diff --git a/src/lib/modules/file/upload.svelte.ts b/src/lib/modules/file/upload.svelte.ts
index da205f3..679de5b 100644
--- a/src/lib/modules/file/upload.svelte.ts
+++ b/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),
   );
 };
diff --git a/src/routes/(fullscreen)/file/downloads/+page.svelte b/src/routes/(fullscreen)/file/downloads/+page.svelte
index 5865db8..860901f 100644
--- a/src/routes/(fullscreen)/file/downloads/+page.svelte
+++ b/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 { bulkGetFileInfo } from "$lib/modules/filesystem";
+  import {
+    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();
-  const filesPromise = $derived(
-    bulkGetFileInfo(
-      downloadingFiles.map(({ id }) => id),
+  let downloadingFiles: { info: MaybeFileInfo; state: FileDownloadState }[] = $state([]);
+
+  onMount(async () => {
+    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}
-        {@const info = files.get(state.id)!}
-        {#if info.exists}
-          <File {state} {info} />
-        {/if}
-      {/each}
-    </div>
-  {/await}
+  <div class="space-y-2 pb-4">
+    {#each downloadingFiles as { info, state } (info.id)}
+      {#if info.exists}
+        <File {info} {state} />
+      {/if}
+    {/each}
+  </div>
 </FullscreenDiv>
diff --git a/src/routes/(fullscreen)/file/downloads/File.svelte b/src/routes/(fullscreen)/file/downloads/File.svelte
index f5012bc..d70428e 100644
--- a/src/routes/(fullscreen)/file/downloads/File.svelte
+++ b/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;
   }
 
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
index 2db5533..57c02b2 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
@@ -33,47 +33,38 @@
 
   const toEntry =
     <T extends Exclude<Entry["type"], "parent">>(type: T) =>
-    (details: Extract<Entry, { type: T }>["details"]) => ({
-      type,
-      name: details.name,
-      details,
-    });
+    (details: Extract<Entry, { type: T }>["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
-      count={entries.length}
-      itemHeight={(index) => 56 + (index + 1 < entries.length ? 4 : 0)}
-    >
+    <RowVirtualizer count={entries.length} itemHeight={() => 56} itemGap={4}>
       {#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=".." />
-            </ActionEntryButton>
-          {:else if entry.type === "directory"}
-            <SubDirectory
-              info={entry.details}
-              onclick={onEntryClick}
-              onOpenMenuClick={onEntryMenuClick}
-            />
-          {:else if entry.type === "file"}
-            <File info={entry.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
-          {:else}
-            <UploadingFile state={entry.details} />
-          {/if}
-        </div>
+        {#if entry.type === "parent"}
+          <ActionEntryButton class="h-14" onclick={onParentClick}>
+            <DirectoryEntryLabel type="parent-directory" name=".." />
+          </ActionEntryButton>
+        {:else if entry.type === "directory"}
+          <SubDirectory
+            info={entry.details}
+            onclick={onEntryClick}
+            onOpenMenuClick={onEntryMenuClick}
+          />
+        {:else if entry.type === "file"}
+          <File info={entry.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
+        {:else}
+          <UploadingFile state={entry.details} />
+        {/if}
       {/snippet}
     </RowVirtualizer>
   </div>