삭제된 파일의 캐시가 존재하는 경우 캐시 페이지의 로딩이 끝나지 않는 버그 수정

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

@@ -5,7 +5,7 @@
   import { page } from "$app/state";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { Categories, IconEntryButton, TopBar } from "$lib/components/molecules";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { getFileInfo, type FileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { captureVideoThumbnail } from "$lib/modules/thumbnail";
   import { getFileDownloadState } from "$lib/modules/file";
   import { masterKeyStore } from "$lib/stores";
@@ -26,7 +26,7 @@
 
   let { data } = $props();
 
-  let infoPromise: Promise<FileInfo | null> | undefined = $state();
+  let infoPromise: Promise<MaybeFileInfo> | undefined = $state();
   let info: FileInfo | null = $state(null);
   let downloadState = $derived(getFileDownloadState(data.id));
 
@@ -75,7 +75,9 @@
 
   $effect(() => {
     infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => {
-      info = fileInfo;
+      if (fileInfo.exists) {
+        info = fileInfo;
+      }
       return fileInfo;
     });
     info = null;

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

@@ -2,7 +2,7 @@
   import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
   import { SubCategories } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
-  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
@@ -13,7 +13,7 @@
 
   let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
 
-  let categoryInfoPromise: Promise<CategoryInfo | null> | undefined = $state();
+  let categoryInfoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
 
@@ -25,7 +25,7 @@
 </script>
 
 {#await categoryInfoPromise then categoryInfo}
-  {#if categoryInfo}
+  {#if categoryInfo?.exists}
     <BottomSheet bind:isOpen class="flex flex-col">
       <FullscreenDiv>
         <SubCategories

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

@@ -23,7 +23,9 @@
   {#await filesPromise then files}
     <div class="space-y-2 pb-4">
       {#each files as file, index}
-        <File state={downloadingFiles[index]!} info={file} />
+        {#if file.exists}
+          <File state={downloadingFiles[index]!} info={file} />
+        {/if}
       {/each}
     </div>
   {/await}

src/routes/(fullscreen)/gallery/+page.svelte

@@ -4,12 +4,12 @@
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import { Gallery } from "$lib/components/organisms";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { getFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
 
   let { data } = $props();
 
-  let files: (FileInfo | null)[] = $state([]);
+  let files: MaybeFileInfo[] = $state([]);
 
   onMount(async () => {
     files = await Promise.all(
@@ -25,7 +25,7 @@
 <TopBar title="사진 및 동영상" />
 <FullscreenDiv>
   <Gallery
-    files={files.filter((file) => !!file)}
+    files={files.filter((file) => file?.exists)}
     onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)}
   />
 </FullscreenDiv>

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

@@ -4,14 +4,14 @@
   import { TopBar } from "$lib/components/molecules";
   import type { FileCacheIndex } from "$lib/indexedDB";
   import { getFileCacheIndex, deleteFileCache as doDeleteFileCache } from "$lib/modules/file";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { getFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { formatFileSize } from "$lib/utils";
   import File from "./File.svelte";
 
   interface FileCache {
     index: FileCacheIndex;
-    fileInfo: FileInfo | null;
+    info: MaybeFileInfo;
   }
 
   let fileCache: FileCache[] | undefined = $state();
@@ -26,7 +26,7 @@
     fileCache = await Promise.all(
       getFileCacheIndex().map(async (index) => ({
         index,
-        fileInfo: await getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
+        info: await getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
       })),
     );
     fileCache.sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
@@ -55,8 +55,8 @@
         <p>캐시를 삭제하더라도 원본 파일은 삭제되지 않아요.</p>
       </div>
       <div class="space-y-2">
-        {#each fileCache as { index, fileInfo }}
-          <File {index} info={fileInfo} onDeleteClick={deleteFileCache} />
+        {#each fileCache as { index, info }}
+          <File {index} {info} onDeleteClick={deleteFileCache} />
         {/each}
       </div>
     </div>

src/routes/(fullscreen)/settings/cache/File.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FileCacheIndex } from "$lib/indexedDB";
-  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
+  import type { MaybeFileInfo } from "$lib/modules/filesystem";
   import { formatDate, formatFileSize } from "$lib/utils";
 
   import IconDraft from "~icons/material-symbols/draft";
@@ -9,7 +9,7 @@
 
   interface Props {
     index: FileCacheIndex;
-    info: SummarizedFileInfo | null;
+    info: MaybeFileInfo;
     onDeleteClick: (fileId: number) => void;
   }
 
@@ -17,7 +17,7 @@
 </script>
 
 <div class="flex h-14 items-center gap-x-4 p-2">
-  {#if info}
+  {#if info.exists}
     <div class="flex-shrink-0 rounded-full bg-blue-100 p-1 text-xl">
       <IconDraft class="text-blue-400" />
     </div>
@@ -27,7 +27,7 @@
     </div>
   {/if}
   <div class="flex-grow overflow-hidden">
-    {#if info}
+    {#if info.exists}
       <p title={info.name} class="truncate font-medium">{info.name}</p>
     {:else}
       <p class="font-medium">삭제된 파일</p>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { get } from "svelte/store";
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { IconEntryButton, TopBar } from "$lib/components/molecules";
@@ -15,12 +14,13 @@
   } from "./service.svelte";
 
   import IconDelete from "~icons/material-symbols/delete";
+  import { file } from "zod";
 
   let { data } = $props();
 
   const generateAllThumbnails = () => {
     persistentStates.files.forEach(({ info }) => {
-      if (info) {
+      if (info.exists) {
         requestThumbnailGeneration(info);
       }
     });
@@ -58,12 +58,14 @@
           </p>
           <div class="space-y-2">
             {#each persistentStates.files as { info, status }}
-              <File
-                {info}
-                generationStatus={status}
-                onclick={({ id }) => goto(`/file/${id}`)}
-                onGenerateThumbnailClick={requestThumbnailGeneration}
-              />
+              {#if info.exists}
+                <File
+                  {info}
+                  generationStatus={status}
+                  onclick={({ id }) => goto(`/file/${id}`)}
+                  onGenerateThumbnailClick={requestThumbnailGeneration}
+                />
+              {/if}
             {/each}
           </div>
         </div>

src/routes/(fullscreen)/settings/thumbnail/service.svelte.ts

@@ -2,7 +2,7 @@ import { limitFunction } from "p-limit";
 import { get, writable, type Writable } from "svelte/store";
 import { encryptData } from "$lib/modules/crypto";
 import { storeFileThumbnailCache } from "$lib/modules/file";
-import type { FileInfo } from "$lib/modules/filesystem";
+import type { FileInfo, MaybeFileInfo } from "$lib/modules/filesystem";
 import { generateThumbnail as doGenerateThumbnail } from "$lib/modules/thumbnail";
 import { requestFileDownload, requestFileThumbnailUpload } from "$lib/services/file";
 
@@ -17,7 +17,7 @@ export type GenerationStatus =
 
 interface File {
   id: number;
-  info: FileInfo;
+  info: MaybeFileInfo;
   status?: Writable<GenerationStatus>;
 }