홈, 갤러리, 캐시 설정, 썸네일 설정 페이지에서의 네트워크 호출 최적화

src/lib/indexedDB/filesystem.ts

@@ -74,6 +74,10 @@ export const getFileInfo = async (id: number) => {
   return await filesystem.file.get(id);
 };
 
+export const bulkGetFileInfos = async (ids: number[]) => {
+  return await filesystem.file.bulkGet(ids);
+};
+
 export const storeFileInfo = async (fileInfo: FileInfo) => {
   await filesystem.file.put(fileInfo);
 };

src/lib/modules/filesystem/category.ts

@@ -1,9 +1,9 @@
 import * as IndexedDB from "$lib/indexedDB";
 import { trpc, isTRPCClientError } from "$trpc/client";
 import { FilesystemCache, decryptFileMetadata, decryptCategoryMetadata } from "./internal.svelte";
-import type { CategoryInfo } from "./types";
+import type { MaybeCategoryInfo } from "./types";
 
-const cache = new FilesystemCache<CategoryId, CategoryInfo, Partial<CategoryInfo>>();
+const cache = new FilesystemCache<CategoryId, MaybeCategoryInfo, Partial<MaybeCategoryInfo>>();
 
 const fetchFromIndexedDB = async (id: CategoryId) => {
   const [category, subCategories] = await Promise.all([
@@ -29,10 +29,15 @@ const fetchFromIndexedDB = async (id: CategoryId) => {
     : undefined;
 
   if (id === "root") {
-    return { id, subCategories };
+    return {
+      id,
+      exists: true as const,
+      subCategories,
+    };
   } else if (category) {
     return {
       id,
+      exists: true as const,
       name: category.name,
       subCategories,
       files: files!.filter((file) => !!file),
@@ -68,10 +73,15 @@ const fetchFromServer = async (id: CategoryId, masterKey: CryptoKey) => {
     ]);
 
     if (id === "root") {
-      return { id, subCategories };
+      return {
+        id,
+        exists: true as const,
+        subCategories,
+      };
     } else {
       return {
         id,
+        exists: true as const,
         subCategories,
         files,
         ...(await decryptCategoryMetadata(metadata!, masterKey)),
@@ -79,9 +89,8 @@ const fetchFromServer = async (id: CategoryId, masterKey: CryptoKey) => {
     }
   } catch (e) {
     if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      cache.delete(id);
       await IndexedDB.deleteCategoryInfo(id as number);
-      return;
+      return { id, exists: false as const };
     }
     throw e;
   }

src/lib/modules/filesystem/directory.ts

@@ -2,9 +2,9 @@ import * as IndexedDB from "$lib/indexedDB";
 import { monotonicResolve } from "$lib/utils";
 import { trpc, isTRPCClientError } from "$trpc/client";
 import { FilesystemCache, decryptDirectoryMetadata, decryptFileMetadata } from "./internal.svelte";
-import type { DirectoryInfo } from "./types";
+import type { MaybeDirectoryInfo } from "./types";
 
-const cache = new FilesystemCache<DirectoryId, DirectoryInfo>();
+const cache = new FilesystemCache<DirectoryId, MaybeDirectoryInfo>();
 
 const fetchFromIndexedDB = async (id: DirectoryId) => {
   const [directory, subDirectories, files] = await Promise.all([
@@ -14,9 +14,21 @@ const fetchFromIndexedDB = async (id: DirectoryId) => {
   ]);
 
   if (id === "root") {
-    return { id, subDirectories, files };
+    return {
+      id,
+      exists: true as const,
+      subDirectories,
+      files,
+    };
   } else if (directory) {
-    return { id, parentId: directory.parentId, name: directory.name, subDirectories, files };
+    return {
+      id,
+      exists: true as const,
+      parentId: directory.parentId,
+      name: directory.name,
+      subDirectories,
+      files,
+    };
   }
 };
 
@@ -44,10 +56,16 @@ const fetchFromServer = async (id: DirectoryId, masterKey: CryptoKey) => {
     ]);
 
     if (id === "root") {
-      return { id, subDirectories, files };
+      return {
+        id,
+        exists: true as const,
+        subDirectories,
+        files,
+      };
     } else {
       return {
         id,
+        exists: true as const,
         parentId: metadata!.parent,
         subDirectories,
         files,
@@ -56,9 +74,8 @@ const fetchFromServer = async (id: DirectoryId, masterKey: CryptoKey) => {
     }
   } catch (e) {
     if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      cache.delete(id);
       await IndexedDB.deleteDirectoryInfo(id as number);
-      return;
+      return { id, exists: false as const };
     }
     throw e;
   }

src/lib/modules/filesystem/file.ts

@@ -2,9 +2,9 @@ import * as IndexedDB from "$lib/indexedDB";
 import { monotonicResolve } from "$lib/utils";
 import { trpc, isTRPCClientError } from "$trpc/client";
 import { FilesystemCache, decryptFileMetadata, decryptCategoryMetadata } from "./internal.svelte";
-import type { FileInfo } from "./types";
+import type { MaybeFileInfo } from "./types";
 
-const cache = new FilesystemCache<number, FileInfo>();
+const cache = new FilesystemCache<number, MaybeFileInfo>();
 
 const fetchFromIndexedDB = async (id: number) => {
   const file = await IndexedDB.getFileInfo(id);
@@ -20,6 +20,7 @@ const fetchFromIndexedDB = async (id: number) => {
   if (file) {
     return {
       id,
+      exists: true as const,
       parentId: file.parentId,
       contentType: file.contentType,
       name: file.name,
@@ -30,6 +31,38 @@ const fetchFromIndexedDB = async (id: number) => {
   }
 };
 
+const bulkFetchFromIndexedDB = async (ids: number[]) => {
+  const files = await IndexedDB.bulkGetFileInfos(ids);
+  const categories = await Promise.all(
+    files.map(async (file) =>
+      file
+        ? await Promise.all(
+            file.categoryIds.map(async (categoryId) => {
+              const category = await IndexedDB.getCategoryInfo(categoryId);
+              return category ? { id: category.id, name: category.name } : undefined;
+            }),
+          )
+        : undefined,
+    ),
+  );
+  return new Map(
+    files
+      .map((file, index) =>
+        file
+          ? ([
+              file.id,
+              {
+                ...file,
+                exists: true,
+                categories: categories[index]!.filter((category) => !!category),
+              },
+            ] as const)
+          : undefined,
+      )
+      .filter((file) => !!file),
+  );
+};
+
 const fetchFromServer = async (id: number, masterKey: CryptoKey) => {
   try {
     const { categories: categoriesRaw, ...metadata } = await trpc().file.get.query({ id });
@@ -44,6 +77,7 @@ const fetchFromServer = async (id: number, masterKey: CryptoKey) => {
 
     return {
       id,
+      exists: true as const,
       parentId: metadata.parent,
       contentType: metadata.contentType,
       contentIv: metadata.contentIv,
@@ -52,14 +86,42 @@ const fetchFromServer = async (id: number, masterKey: CryptoKey) => {
     };
   } catch (e) {
     if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      cache.delete(id);
       await IndexedDB.deleteFileInfo(id);
-      return;
+      return { id, exists: false as const };
     }
     throw e;
   }
 };
 
+const bulkFetchFromServer = async (ids: number[], masterKey: CryptoKey) => {
+  const filesRaw = await trpc().file.bulkGet.query({ ids });
+  const files = await Promise.all(
+    filesRaw.map(async (file) => {
+      const categories = await Promise.all(
+        file.categories.map(async (category) => ({
+          id: category.id,
+          ...(await decryptCategoryMetadata(category, masterKey)),
+        })),
+      );
+      return {
+        id: file.id,
+        exists: true as const,
+        parentId: file.parent,
+        contentType: file.contentType,
+        contentIv: file.contentIv,
+        categories,
+        ...(await decryptFileMetadata(file, masterKey)),
+      };
+    }),
+  );
+
+  const existingIds = new Set(filesRaw.map(({ id }) => id));
+  return new Map<number, MaybeFileInfo>([
+    ...files.map((file) => [file.id, file] as const),
+    ...ids.filter((id) => !existingIds.has(id)).map((id) => [id, { id, exists: false }] as const),
+  ]);
+};
+
 export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
   return await cache.get(id, (isInitial, resolve) =>
     monotonicResolve(
@@ -68,3 +130,22 @@ export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
     ),
   );
 };
+
+export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => {
+  return await cache.bulkGet(new Set(ids), (keys, resolve) =>
+    monotonicResolve(
+      [
+        bulkFetchFromIndexedDB(
+          Array.from(
+            keys
+              .entries()
+              .filter(([, isInitial]) => isInitial)
+              .map(([key]) => key),
+          ),
+        ),
+        bulkFetchFromServer(Array.from(keys.keys()), masterKey),
+      ],
+      resolve,
+    ),
+  );
+};

src/lib/modules/filesystem/internal.svelte.ts

@@ -17,7 +17,7 @@ export class FilesystemCache<K, V extends RV, RV = V> {
     loader(!info, (loadedInfo) => {
       if (!loadedInfo) return;
 
-      let info = this.map.get(key)!;
+      const info = this.map.get(key)!;
       if (info instanceof Promise) {
         const state = $state(loadedInfo);
         this.map.set(key, state as V);
@@ -31,8 +31,52 @@ export class FilesystemCache<K, V extends RV, RV = V> {
     return info ?? promise;
   }
 
-  delete(key: K) {
-    this.map.delete(key);
+  async bulkGet(
+    keys: Set<K>,
+    loader: (keys: Map<K, boolean>, resolve: (values: Map<K, RV>) => void) => void,
+  ) {
+    const states = new Map<K, V>();
+    const promises = new Map<K, Promise<V>>();
+    const resolvers = new Map<K, (value: V) => void>();
+
+    keys.forEach((key) => {
+      const info = this.map.get(key);
+      if (info instanceof Promise) {
+        promises.set(key, info);
+      } else if (info) {
+        states.set(key, info);
+      } else {
+        const { promise, resolve } = Promise.withResolvers<V>();
+        this.map.set(key, promise);
+        promises.set(key, promise);
+        resolvers.set(key, resolve);
+      }
+    });
+
+    loader(
+      new Map([
+        ...states.keys().map((key) => [key, false] as const),
+        ...resolvers.keys().map((key) => [key, true] as const),
+      ]),
+      (loadedInfos) =>
+        loadedInfos.forEach((loadedInfo, key) => {
+          const info = this.map.get(key)!;
+          const resolve = resolvers.get(key);
+          if (info instanceof Promise) {
+            const state = $state(loadedInfo);
+            this.map.set(key, state as V);
+            resolve?.(state as V);
+          } else {
+            Object.assign(info, loadedInfo);
+            resolve?.(info);
+          }
+        }),
+    );
+
+    const newStates = await Promise.all(
+      promises.entries().map(async ([key, promise]) => [key, await promise] as const),
+    );
+    return new Map([...states, ...newStates]);
   }
 }
 

src/lib/modules/filesystem/types.ts

@@ -1,4 +1,5 @@
 export type DataKey = { key: CryptoKey; version: Date };
+type AllUndefined<T> = { [K in keyof T]?: undefined };
 
 interface LocalDirectoryInfo {
   id: number;
@@ -20,6 +21,9 @@ interface RootDirectoryInfo {
 
 export type DirectoryInfo = LocalDirectoryInfo | RootDirectoryInfo;
 export type SubDirectoryInfo = Omit<LocalDirectoryInfo, "parentId" | "subDirectories" | "files">;
+export type MaybeDirectoryInfo =
+  | (DirectoryInfo & { exists: true })
+  | ({ id: DirectoryId; exists: false } & AllUndefined<Omit<DirectoryInfo, "id">>);
 
 export interface FileInfo {
   id: number;
@@ -35,6 +39,9 @@ export interface FileInfo {
 
 export type SummarizedFileInfo = Omit<FileInfo, "parentId" | "contentIv" | "categories">;
 export type CategoryFileInfo = SummarizedFileInfo & { isRecursive: boolean };
+export type MaybeFileInfo =
+  | (FileInfo & { exists: true })
+  | ({ id: number; exists: false } & AllUndefined<Omit<FileInfo, "id">>);
 
 interface LocalCategoryInfo {
   id: number;
@@ -59,3 +66,6 @@ export type SubCategoryInfo = Omit<
   LocalCategoryInfo,
   "subCategories" | "files" | "isFileRecursive"
 >;
+export type MaybeCategoryInfo =
+  | (CategoryInfo & { exists: true })
+  | ({ id: CategoryId; exists: false } & AllUndefined<Omit<CategoryInfo, "id">>);

src/lib/server/db/file.ts

@@ -1,4 +1,5 @@
 import { sql } from "kysely";
+import { jsonArrayFrom } from "kysely/helpers/postgres";
 import pg from "pg";
 import { IntegrityError } from "./error";
 import db from "./kysely";
@@ -36,6 +37,14 @@ interface File {
 
 export type NewFile = Omit<File, "id">;
 
+interface FileCategory {
+  id: number;
+  mekVersion: number;
+  encDek: string;
+  dekVersion: Date;
+  encName: Ciphertext;
+}
+
 export const registerDirectory = async (params: NewDirectory) => {
   await db.transaction().execute(async (trx) => {
     const mek = await trx
@@ -400,6 +409,51 @@ export const getFile = async (userId: number, fileId: number) => {
     : null;
 };
 
+export const getFilesWithCategories = async (userId: number, fileIds: number[]) => {
+  const files = await db
+    .selectFrom("file")
+    .selectAll()
+    .select((eb) =>
+      jsonArrayFrom(
+        eb
+          .selectFrom("file_category")
+          .innerJoin("category", "file_category.category_id", "category.id")
+          .where("file_category.file_id", "=", eb.ref("file.id"))
+          .selectAll("category"),
+      ).as("categories"),
+    )
+    .where("id", "=", (eb) => eb.fn.any(eb.val(fileIds)))
+    .where("user_id", "=", userId)
+    .execute();
+  return files.map(
+    (file) =>
+      ({
+        id: file.id,
+        parentId: file.parent_id ?? "root",
+        userId: file.user_id,
+        path: file.path,
+        mekVersion: file.master_encryption_key_version,
+        encDek: file.encrypted_data_encryption_key,
+        dekVersion: file.data_encryption_key_version,
+        hskVersion: file.hmac_secret_key_version,
+        contentHmac: file.content_hmac,
+        contentType: file.content_type,
+        encContentIv: file.encrypted_content_iv,
+        encContentHash: file.encrypted_content_hash,
+        encName: file.encrypted_name,
+        encCreatedAt: file.encrypted_created_at,
+        encLastModifiedAt: file.encrypted_last_modified_at,
+        categories: file.categories.map((category) => ({
+          id: category.id,
+          mekVersion: category.master_encryption_key_version,
+          encDek: category.encrypted_data_encryption_key,
+          dekVersion: new Date(category.data_encryption_key_version),
+          encName: category.encrypted_name,
+        })),
+      }) satisfies File & { categories: FileCategory[] },
+  );
+};
+
 export const setFileEncName = async (
   userId: number,
   fileId: number,
@@ -490,13 +544,16 @@ export const getAllFileCategories = async (fileId: number) => {
     .selectAll("category")
     .where("file_id", "=", fileId)
     .execute();
-  return categories.map((category) => ({
-    id: category.id,
-    mekVersion: category.master_encryption_key_version,
-    encDek: category.encrypted_data_encryption_key,
-    dekVersion: category.data_encryption_key_version,
-    encName: category.encrypted_name,
-  }));
+  return categories.map(
+    (category) =>
+      ({
+        id: category.id,
+        mekVersion: category.master_encryption_key_version,
+        encDek: category.encrypted_data_encryption_key,
+        dekVersion: category.data_encryption_key_version,
+        encName: category.encrypted_name,
+      }) satisfies FileCategory,
+  );
 };
 
 export const removeFileFromCategory = async (fileId: number, categoryId: number) => {

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

@@ -2,13 +2,16 @@
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import { getDownloadingFiles, clearDownloadedFiles } from "$lib/modules/file";
-  import { getFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
 
   const downloadingFiles = getDownloadingFiles();
   const filesPromise = $derived(
-    Promise.all(downloadingFiles.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!))),
+    bulkGetFileInfo(
+      downloadingFiles.map(({ id }) => id),
+      $masterKeyStore?.get(1)?.key!,
+    ),
   );
 
   $effect(() => clearDownloadedFiles);
@@ -22,8 +25,11 @@
 <FullscreenDiv>
   {#await filesPromise then files}
     <div class="space-y-2 pb-4">
-      {#each files as file, index}
-        <File state={downloadingFiles[index]!} info={file} />
+      {#each downloadingFiles as state}
+        {@const info = files.get(state.id)!}
+        {#if info.exists}
+          <File {state} {info} />
+        {/if}
       {/each}
     </div>
   {/await}

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

@@ -4,17 +4,15 @@
   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 { bulkGetFileInfo, 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(
-      data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!)),
-    );
+    files = Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values());
   });
 </script>
 
@@ -25,7 +23,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 { bulkGetFileInfo, 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();
@@ -23,13 +23,17 @@
   };
 
   onMount(async () => {
-    fileCache = await Promise.all(
-      getFileCacheIndex().map(async (index) => ({
-        index,
-        fileInfo: await getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
-      })),
+    const indexes = getFileCacheIndex();
+    const infos = await bulkGetFileInfo(
+      indexes.map(({ fileId }) => fileId),
+      $masterKeyStore?.get(1)?.key!,
     );
-    fileCache.sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
+    fileCache = indexes
+      .map((index, i) => ({
+        index,
+        info: infos.get(index.fileId)!,
+      }))
+      .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
   });
 
   $effect(() => {
@@ -55,8 +59,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,11 +1,10 @@
 <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";
   import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
-  import { getFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
@@ -20,20 +19,19 @@
 
   const generateAllThumbnails = () => {
     persistentStates.files.forEach(({ info }) => {
-      if (info) {
+      if (info.exists) {
         requestThumbnailGeneration(info);
       }
     });
   };
 
   onMount(async () => {
-    persistentStates.files = await Promise.all(
-      data.files.map(async (fileId) => ({
-        id: fileId,
-        info: await getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
-        status: getGenerationStatus(fileId),
-      })),
-    );
+    const fileInfos = await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!);
+    persistentStates.files = persistentStates.files.map(({ id, status }) => ({
+      id,
+      info: fileInfos.get(id)!,
+      status,
+    }));
   });
 </script>
 
@@ -58,12 +56,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>;
 }
 

src/routes/(main)/category/[[id]]/+page.svelte

@@ -2,7 +2,7 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components/molecules";
   import { Category, 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 CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
@@ -18,7 +18,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<CategoryInfo> | undefined = $state();
+  let infoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
@@ -35,7 +35,7 @@
 </svelte:head>
 
 {#await infoPromise then info}
-  {#if info}
+  {#if info?.exists}
     {#if info.id !== "root"}
       <TopBar title={info.name} />
     {/if}

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

@@ -4,7 +4,7 @@
   import { page } from "$app/state";
   import { FloatingButton } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
+  import { getDirectoryInfo, type MaybeDirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
@@ -29,7 +29,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<DirectoryInfo> | undefined = $state();
+  let infoPromise: Promise<MaybeDirectoryInfo> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -89,7 +89,7 @@
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
 {#await infoPromise then info}
-  {#if info}
+  {#if info?.exists}
     <div class="flex h-full flex-col">
       {#if showTopBar}
         <TopBar title={info.name} class="flex-shrink-0" />

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

@@ -2,16 +2,21 @@
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { EntryButton, FileThumbnailButton } from "$lib/components/atoms";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { requestFreshMediaFilesRetrieval } from "./service";
 
-  let mediaFiles: (FileInfo | null)[] = $state([]);
+  let mediaFiles: MaybeFileInfo[] = $state([]);
 
   onMount(async () => {
     const files = await requestFreshMediaFilesRetrieval();
-    mediaFiles = await Promise.all(
-      files.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!)),
+    mediaFiles = Array.from(
+      (
+        await bulkGetFileInfo(
+          files.map(({ id }) => id),
+          $masterKeyStore?.get(1)?.key!,
+        )
+      ).values(),
     );
   });
 </script>
@@ -29,7 +34,7 @@
     {#if mediaFiles.length > 0}
       <div class="grid grid-cols-4 gap-2 p-2">
         {#each mediaFiles as file}
-          {#if file}
+          {#if file.exists}
             <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
           {/if}
         {/each}

src/trpc/routers/file.ts

@@ -42,6 +42,39 @@ const fileRouter = router({
       };
     }),
 
+  bulkGet: roleProcedure["activeClient"]
+    .input(
+      z.object({
+        ids: z.number().positive().array(),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const files = await FileRepo.getFilesWithCategories(ctx.session.userId, input.ids);
+      return files.map((file) => ({
+        id: file.id,
+        parent: file.parentId,
+        mekVersion: file.mekVersion,
+        dek: file.encDek,
+        dekVersion: file.dekVersion,
+        contentType: file.contentType,
+        contentIv: file.encContentIv,
+        name: file.encName.ciphertext,
+        nameIv: file.encName.iv,
+        createdAt: file.encCreatedAt?.ciphertext,
+        createdAtIv: file.encCreatedAt?.iv,
+        lastModifiedAt: file.encLastModifiedAt.ciphertext,
+        lastModifiedAtIv: file.encLastModifiedAt.iv,
+        categories: file.categories.map((category) => ({
+          id: category.id,
+          mekVersion: category.mekVersion,
+          dek: category.encDek,
+          dekVersion: category.dekVersion,
+          name: category.encName.ciphertext,
+          nameIv: category.encName.iv,
+        })),
+      }));
+    }),
+
   list: roleProcedure["activeClient"].query(async ({ ctx }) => {
     return await FileRepo.getAllFileIds(ctx.session.userId);
   }),