사소한 리팩토링 2

src/routes/(fullscreen)/settings/cache/+page.svelte

@@ -15,7 +15,9 @@
   }
 
   let fileCache: FileCache[] | undefined = $state();
-  let fileCacheTotalSize = $state(0);
+  let fileCacheTotalSize = $derived(
+    fileCache?.reduce((acc, { index }) => acc + index.size, 0) ?? 0,
+  );
 
   const deleteFileCache = async (fileId: number) => {
     await doDeleteFileCache(fileId);
@@ -29,18 +31,9 @@
       $masterKeyStore?.get(1)?.key!,
     );
     fileCache = indexes
-      .map((index, i) => ({
-        index,
-        info: infos.get(index.fileId)!,
-      }))
+      .map((index) => ({ index, info: infos.get(index.fileId)! }))
       .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
   });
-
-  $effect(() => {
-    if (fileCache) {
-      fileCacheTotalSize = fileCache.reduce((acc, { index }) => acc + index.size, 0);
-    }
-  });
 </script>
 
 <svelte:head>
@@ -59,7 +52,7 @@
         <p>캐시를 삭제하더라도 원본 파일은 삭제되지 않아요.</p>
       </div>
       <div class="space-y-2">
-        {#each fileCache as { index, info }}
+        {#each fileCache as { index, info } (info.id)}
           <File {index} {info} onDeleteClick={deleteFileCache} />
         {/each}
       </div>

src/routes/(fullscreen)/settings/thumbnail/+page.svelte

@@ -7,11 +7,7 @@
   import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
-  import {
-    persistentStates,
-    getGenerationStatus,
-    requestThumbnailGeneration,
-  } from "./service.svelte";
+  import { persistentStates, requestThumbnailGeneration } from "./service.svelte";
 
   import IconDelete from "~icons/material-symbols/delete";
 
@@ -55,7 +51,7 @@
             {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
           </p>
           <div class="space-y-2">
-            {#each persistentStates.files as { info, status }}
+            {#each persistentStates.files as { info, status } (info.id)}
               {#if info.exists}
                 <File
                   {info}

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

@@ -46,28 +46,26 @@
 </script>
 
 {#if entries.length > 0}
-  <div class="pb-[4.5rem]">
-    <RowVirtualizer count={entries.length} itemHeight={() => 56} itemGap={4}>
-      {#snippet item(index)}
-        {@const entry = entries[index]!}
-        {#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>
+  <RowVirtualizer count={entries.length} itemHeight={() => 56} itemGap={4} class="pb-[4.5rem]">
+    {#snippet item(index)}
+      {@const entry = entries[index]!}
+      {#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>
 {:else}
   <div class="flex flex-grow items-center justify-center">
     <p class="text-gray-500">폴더가 비어 있어요.</p>

src/routes/(main)/home/+page.svelte

@@ -33,7 +33,7 @@
     </EntryButton>
     {#if mediaFiles.length > 0}
       <div class="grid grid-cols-4 gap-2 p-2">
-        {#each mediaFiles as file}
+        {#each mediaFiles as file (file.id)}
           {#if file.exists}
             <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
           {/if}