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

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

@@ -1,18 +1,20 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
+  import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   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 FileInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore } from "$lib/stores";
 
   let { data } = $props();
 
-  let files: Writable<FileInfo | null>[] = $state([]);
+  let files: (FileInfo | null)[] = $state([]);
 
-  $effect(() => {
-    files = data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!));
+  onMount(async () => {
+    files = await Promise.all(
+      data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!)),
+    );
   });
 </script>
 
@@ -22,5 +24,8 @@
 
 <TopBar title="사진 및 동영상" />
 <FullscreenDiv>
-  <Gallery {files} onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)} />
+  <Gallery
+    files={files.filter((file) => !!file)}
+    onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)}
+  />
 </FullscreenDiv>