동시에 업로드할 수 있는 파일의 메모리 용량을 제한하여 메모리 부족으로 인해 발생하던 크래시 해결

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

@@ -4,17 +4,36 @@
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { IconEntryButton, TopBar } from "$lib/components/molecules";
   import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
-  import { bulkGetFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { sortEntries } from "$lib/utils";
   import File from "./File.svelte";
-  import { persistentStates, requestThumbnailGeneration } from "./service.svelte";
+  import {
+    getThumbnailGenerationStatus,
+    clearThumbnailGenerationStatuses,
+    requestThumbnailGeneration,
+    type GenerationStatus,
+  } from "./service.svelte";
 
   import IconDelete from "~icons/material-symbols/delete";
 
   let { data } = $props();
 
+  let fileInfos: MaybeFileInfo[] = $state([]);
+  let files = $derived(
+    fileInfos
+      .map((info) => ({
+        info,
+        status: getThumbnailGenerationStatus(info.id),
+      }))
+      .filter(
+        (file): file is { info: MaybeFileInfo; status: Exclude<GenerationStatus, "uploaded"> } =>
+          file.status !== "uploaded",
+      ),
+  );
+
   const generateAllThumbnails = () => {
-    persistentStates.files.forEach(({ info }) => {
+    files.forEach(({ info }) => {
       if (info.exists) {
         requestThumbnailGeneration(info);
       }
@@ -22,13 +41,12 @@
   };
 
   onMount(async () => {
-    const fileInfos = await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!);
-    persistentStates.files = persistentStates.files.map(({ id, status }) => ({
-      id,
-      info: fileInfos.get(id)!,
-      status,
-    }));
+    fileInfos = sortEntries(
+      Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values()),
+    );
   });
+
+  $effect(() => clearThumbnailGenerationStatuses);
 </script>
 
 <svelte:head>
@@ -43,19 +61,19 @@
         저장된 썸네일 모두 삭제하기
       </IconEntryButton>
     </div>
-    {#if persistentStates.files.length > 0}
+    {#if files.length > 0}
       <div class="flex-grow space-y-2 bg-white p-4">
         <p class="text-lg font-bold text-gray-800">썸네일이 누락된 파일</p>
         <div class="space-y-4">
           <p class="break-keep text-gray-800">
-            {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
+            {files.length}개 파일의 썸네일이 존재하지 않아요.
           </p>
           <div class="space-y-2">
-            {#each persistentStates.files as { info, status } (info.id)}
+            {#each files as { info, status } (info.id)}
               {#if info.exists}
                 <File
                   {info}
-                  generationStatus={status}
+                  {status}
                   onclick={({ id }) => goto(`/file/${id}`)}
                   onGenerateThumbnailClick={requestThumbnailGeneration}
                 />
@@ -66,7 +84,7 @@
       </div>
     {/if}
   </div>
-  {#if persistentStates.files.length > 0}
+  {#if files.length > 0}
     <BottomDiv class="px-4">
       <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
     </BottomDiv>