디렉터리 페이지에서의 네트워크 호출 최적화

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -1,66 +1,46 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
+  import { browser } from "$app/environment";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem2.svelte";
+  import { requestFileThumbnailDownload } from "$lib/services/file";
   import { formatDateTime } from "$lib/utils";
-  import { requestFileThumbnailDownload } from "./service";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
-    info: Writable<FileInfo | null>;
-    onclick: (selectedEntry: SelectedEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
+    info: SummarizedFileInfo;
+    onclick: (entry: SelectedEntry) => void;
+    onOpenMenuClick: (entry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
 
-  let thumbnail: string | undefined = $state();
+  let showThumbnail = $derived(
+    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
+  );
+  let thumbnailPromise = $derived(
+    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
+  );
 
-  const openFile = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info!;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onclick({ type: "file", id, dataKey, dataKeyVersion, name });
+  const action = (callback: typeof onclick) => {
+    callback({ type: "file", id: info.id, dataKey: info.dataKey, name: info.name });
   };
-
-  const openMenu = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info!;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
-  };
-
-  $effect(() => {
-    if ($info) {
-      requestFileThumbnailDownload($info.id, $info.dataKey)
-        .then((thumbnailUrl) => {
-          thumbnail = thumbnailUrl ?? undefined;
-        })
-        .catch(() => {
-          // TODO: Error Handling
-          thumbnail = undefined;
-        });
-    } else {
-      thumbnail = undefined;
-    }
-  });
 </script>
 
-{#if $info}
-  <ActionEntryButton
-    class="h-14"
-    onclick={openFile}
-    actionButtonIcon={IconMoreVert}
-    onActionButtonClick={openMenu}
-  >
+<ActionEntryButton
+  class="h-14"
+  onclick={() => action(onclick)}
+  actionButtonIcon={IconMoreVert}
+  onActionButtonClick={() => action(onOpenMenuClick)}
+>
+  {#await thumbnailPromise then thumbnail}
     <DirectoryEntryLabel
       type="file"
-      {thumbnail}
-      name={$info.name}
-      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+      thumbnail={thumbnail ?? undefined}
+      name={info.name}
+      subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
     />
-  </ActionEntryButton>
-{/if}
+  {/await}
+</ActionEntryButton>