파일 페이지에서의 네트워크 호출 최적화

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

@@ -1,18 +1,17 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import type { Writable } from "svelte/store";
   import { FullscreenDiv } from "$lib/components/atoms";
   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 FileInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore } from "$lib/stores";
   import { formatFileSize } from "$lib/utils";
   import File from "./File.svelte";
 
   interface FileCache {
     index: FileCacheIndex;
-    fileInfo: Writable<FileInfo | null>;
+    fileInfo: FileInfo | null;
   }
 
   let fileCache: FileCache[] | undefined = $state();
@@ -23,13 +22,14 @@
     fileCache = fileCache?.filter(({ index }) => index.fileId !== fileId);
   };
 
-  onMount(() => {
-    fileCache = getFileCacheIndex()
-      .map((index) => ({
+  onMount(async () => {
+    fileCache = await Promise.all(
+      getFileCacheIndex().map(async (index) => ({
         index,
-        fileInfo: getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
-      }))
-      .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
+        fileInfo: await getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
+      })),
+    );
+    fileCache.sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
   });
 
   $effect(() => {

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

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

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

@@ -5,7 +5,7 @@
   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 { getFileInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
@@ -20,19 +20,20 @@
 
   const generateAllThumbnails = () => {
     persistentStates.files.forEach(({ info }) => {
-      const fileInfo = get(info);
-      if (fileInfo) {
-        requestThumbnailGeneration(fileInfo);
+      if (info) {
+        requestThumbnailGeneration(info);
       }
     });
   };
 
-  onMount(() => {
-    persistentStates.files = data.files.map((fileId) => ({
-      id: fileId,
-      info: getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
-      status: getGenerationStatus(fileId),
-    }));
+  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),
+      })),
+    );
   });
 </script>
 

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

@@ -13,34 +13,32 @@
   import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { FileInfo } from "$lib/modules/filesystem2.svelte";
   import { formatDateTime } from "$lib/utils";
   import type { GenerationStatus } from "./service.svelte";
 
   import IconCamera from "~icons/material-symbols/camera";
 
   interface Props {
-    info: Writable<FileInfo | null>;
-    onclick: (selectedFile: FileInfo) => void;
-    onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+    info: FileInfo;
+    onclick: (file: FileInfo) => void;
+    onGenerateThumbnailClick: (file: FileInfo) => void;
     generationStatus?: Writable<GenerationStatus>;
   }
 
   let { info, onclick, onGenerateThumbnailClick, generationStatus }: Props = $props();
 </script>
 
-{#if $info}
-  <ActionEntryButton
-    class="h-14"
-    onclick={() => onclick($info)}
-    actionButtonIcon={!$generationStatus || $generationStatus === "error" ? IconCamera : undefined}
-    onActionButtonClick={() => onGenerateThumbnailClick($info)}
-    actionButtonClass="text-gray-800"
-  >
-    {@const subtext =
-      $generationStatus && $generationStatus !== "uploaded"
-        ? subtexts[$generationStatus]
-        : formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
-    <DirectoryEntryLabel type="file" name={$info.name} {subtext} />
-  </ActionEntryButton>
-{/if}
+<ActionEntryButton
+  class="h-14"
+  onclick={() => onclick(info)}
+  actionButtonIcon={!$generationStatus || $generationStatus === "error" ? IconCamera : undefined}
+  onActionButtonClick={() => onGenerateThumbnailClick(info)}
+  actionButtonClass="text-gray-800"
+>
+  {@const subtext =
+    $generationStatus && $generationStatus !== "uploaded"
+      ? subtexts[$generationStatus]
+      : formatDateTime(info.createdAt ?? info.lastModifiedAt)}
+  <DirectoryEntryLabel type="file" name={info.name} {subtext} />
+</ActionEntryButton>

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 } from "$lib/modules/filesystem2.svelte";
 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: Writable<FileInfo | null>;
+  info: FileInfo;
   status?: Writable<GenerationStatus>;
 }
 
@@ -129,7 +129,11 @@ export const requestThumbnailGeneration = async (fileInfo: FileInfo) => {
 
   let fileSize = 0;
   try {
-    const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
+    const file = await requestFileDownload(
+      fileInfo.id,
+      fileInfo.contentIv!,
+      fileInfo.dataKey?.key!,
+    );
     fileSize = file.byteLength;
 
     memoryUsage += fileSize;
@@ -141,11 +145,11 @@ export const requestThumbnailGeneration = async (fileInfo: FileInfo) => {
       status,
       file,
       fileInfo.contentType,
-      fileInfo.dataKey!,
+      fileInfo.dataKey?.key!,
     );
     if (
       !thumbnail ||
-      !(await requestThumbnailUpload(status, fileInfo.id, fileInfo.dataKeyVersion!, thumbnail))
+      !(await requestThumbnailUpload(status, fileInfo.id, fileInfo.dataKey?.version!, thumbnail))
     ) {
       status.set("error");
     }