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

src/lib/components/atoms/buttons/FileThumbnailButton.svelte

@@ -1,42 +1,34 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import { browser } from "$app/environment";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem2.svelte";
   import { requestFileThumbnailDownload } from "$lib/services/file";
 
   interface Props {
-    info: Writable<FileInfo | null>;
-    onclick?: (file: FileInfo) => void;
+    info: SummarizedFileInfo;
+    onclick?: (file: SummarizedFileInfo) => void;
   }
 
   let { info, onclick }: Props = $props();
 
-  let thumbnail: string | undefined = $state();
-
-  $effect(() => {
-    if ($info) {
-      requestFileThumbnailDownload($info.id, $info.dataKey)
-        .then((thumbnailUrl) => {
-          thumbnail = thumbnailUrl ?? undefined;
-        })
-        .catch(() => {
-          // TODO: Error Handling
-          thumbnail = undefined;
-        });
-    } else {
-      thumbnail = undefined;
-    }
-  });
+  let showThumbnail = $derived(
+    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
+  );
+  let thumbnailPromise = $derived(
+    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
+  );
 </script>
 
-{#if $info}
-  <button
-    onclick={() => onclick?.($info)}
-    class="aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
-  >
+<button
+  onclick={onclick && (() => setTimeout(() => onclick(info), 100))}
+  class="aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
+>
+  {#await thumbnailPromise}
+    <div class="h-full w-full bg-gray-100"></div>
+  {:then thumbnail}
     {#if thumbnail}
-      <img src={thumbnail} alt={$info.name} class="h-full w-full object-cover" />
+      <img src={thumbnail} alt={info.name} class="h-full w-full object-cover" />
     {:else}
       <div class="h-full w-full bg-gray-100"></div>
     {/if}
-  </button>
-{/if}
+  {/await}
+</button>

src/lib/components/organisms/Gallery.svelte

@@ -1,98 +1,48 @@
 <script lang="ts">
-  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
   import { FileThumbnailButton, RowVirtualizer } from "$lib/components/atoms";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem2.svelte";
   import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";
 
   interface Props {
-    files: Writable<FileInfo | null>[];
-    onFileClick?: (file: FileInfo) => void;
+    files: SummarizedFileInfo[];
+    onFileClick?: (file: SummarizedFileInfo) => void;
   }
 
   let { files, onFileClick }: Props = $props();
 
-  type FileEntry =
-    | { date?: undefined; contentType?: undefined; info: Writable<FileInfo | null> }
-    | { date: Date; contentType: string; info: Writable<FileInfo | null> };
   type Row =
     | { type: "header"; label: string }
-    | { type: "items"; items: FileEntry[]; isLast: boolean };
+    | { type: "items"; files: SummarizedFileInfo[]; isLast: boolean };
 
-  let filesWithDate: FileEntry[] = $state([]);
-  let rows: Row[] = $state([]);
+  let rows = $derived.by(() => {
+    const groups = Map.groupBy(
+      files.filter(
+        (file) => file.contentType.startsWith("image/") || file.contentType.startsWith("video/"),
+      ),
+      (file) => formatDateSortable(file.createdAt ?? file.lastModifiedAt),
+    );
+    return Array.from(groups.entries())
+      .sort(([dateA], [dateB]) => dateB.localeCompare(dateA))
+      .flatMap(([_, entries]) => {
+        const sortedEntries = [...entries];
+        sortEntries(sortedEntries, SortBy.DATE_DESC);
 
-  $effect(() => {
-    filesWithDate = files.map((file) => {
-      const info = get(file);
-      if (info) {
-        return {
-          date: info.createdAt ?? info.lastModifiedAt,
-          contentType: info.contentType,
-          info: file,
-        };
-      } else {
-        return { info: file };
-      }
-    });
-
-    const buildRows = () => {
-      const map = new Map<string, FileEntry[]>();
-
-      for (const file of filesWithDate) {
-        if (
-          !file.date ||
-          !(file.contentType.startsWith("image/") || file.contentType.startsWith("video/"))
-        ) {
-          continue;
-        }
-
-        const date = formatDateSortable(file.date);
-        const entries = map.get(date) ?? [];
-        entries.push(file);
-        map.set(date, entries);
-      }
-
-      const newRows: Row[] = [];
-      const sortedDates = Array.from(map.keys()).sort((a, b) => b.localeCompare(a));
-      for (const date of sortedDates) {
-        const entries = map.get(date)!;
-        sortEntries(entries, SortBy.DATE_DESC);
-
-        newRows.push({
-          type: "header",
-          label: formatDate(entries[0]!.date!),
-        });
-
-        for (let i = 0; i < entries.length; i += 4) {
-          newRows.push({
-            type: "items",
-            items: entries.slice(i, i + 4),
-            isLast: i + 4 >= entries.length,
-          });
-        }
-      }
-
-      rows = newRows;
-    };
-    return untrack(() => {
-      buildRows();
-
-      const unsubscribes = filesWithDate.map((file) =>
-        file.info.subscribe((value) => {
-          const newDate = value?.createdAt ?? value?.lastModifiedAt;
-          const newContentType = value?.contentType;
-          if (file.date?.getTime() === newDate?.getTime() && file.contentType === newContentType) {
-            return;
-          }
-
-          file.date = newDate;
-          file.contentType = newContentType;
-          buildRows();
-        }),
-      );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
+        return [
+          {
+            type: "header",
+            label: formatDate(sortedEntries[0]!.createdAt ?? sortedEntries[0]!.lastModifiedAt),
+          },
+          ...Array.from({ length: Math.ceil(sortedEntries.length / 4) }, (_, i) => {
+            const start = i * 4;
+            const end = start + 4;
+            return {
+              type: "items" as const,
+              files: sortedEntries.slice(start, end),
+              isLast: end >= sortedEntries.length,
+            };
+          }),
+        ] satisfies Row[];
+      });
   });
 </script>
 
@@ -101,8 +51,8 @@
   itemHeight={(index) =>
     rows[index]!.type === "header"
       ? 28
-      : Math.ceil(rows[index]!.items.length / 4) * 181 +
-        (Math.ceil(rows[index]!.items.length / 4) - 1) * 4 +
+      : Math.ceil(rows[index]!.files.length / 4) * 181 +
+        (Math.ceil(rows[index]!.files.length / 4) - 1) * 4 +
         16}
   class="flex flex-grow flex-col"
 >
@@ -112,8 +62,8 @@
       <p class="pb-2 text-sm font-medium">{row.label}</p>
     {:else}
       <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
-        {#each row.items as { info }}
-          <FileThumbnailButton {info} onclick={onFileClick} />
+        {#each row.files as file}
+          <FileThumbnailButton info={file} onclick={onFileClick} />
         {/each}
       </div>
     {/if}
@@ -123,8 +73,6 @@
       <p class="text-gray-500">
         {#if files.length === 0}
           업로드된 파일이 없어요.
-        {:else if filesWithDate.length === 0}
-          파일 목록을 불러오고 있어요.
         {:else}
           사진 또는 동영상이 없어요.
         {/if}