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

2026-02-04 08:06:56 +00:00 · 2025-12-30 23:30:50 +09:00
parent b5522a4c6d
commit e4413ddbf6
24 changed files with 521 additions and 618 deletions
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
  import FileSaver from "file-saver";
  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
  import { goto } from "$app/navigation";
  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 } from "$lib/modules/filesystem2.svelte";
  import { captureVideoThumbnail } from "$lib/modules/thumbnail";
-  import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
+  import { getFileDownloadState } from "$lib/modules/file";
+  import { masterKeyStore } from "$lib/stores";
  import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
  import DownloadStatus from "./DownloadStatus.svelte";
  import {
@@ -26,19 +26,13 @@

  let { data } = $props();

-  let info: Writable<FileInfo | null> | undefined = $state();
-  // let categories: Writable<CategoryInfo | null>[] = $state([]);
+  let infoPromise: Promise<FileInfo | null> | undefined = $state();
+  let info: FileInfo | null = $state(null);
+  let downloadState = $derived(getFileDownloadState(data.id));

  let isMenuOpen = $state(false);
  let isAddToCategoryBottomSheetOpen = $state(false);

-  let downloadStatus = $derived(
-    $fileDownloadStatusStore.find((statusStore) => {
-      const { id, status } = get(statusStore);
-      return id === data.id && isFileDownloading(status);
-    }),
-  );
-
  let isDownloadRequested = $state(false);
  let viewerType: "image" | "video" | undefined = $state();
  let fileBlob: Blob | undefined = $state();
@@ -71,28 +65,27 @@
  const addToCategory = async (categoryId: number) => {
    await requestFileAdditionToCategory(data.id, categoryId);
    isAddToCategoryBottomSheetOpen = false;
-    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
  };

  const removeFromCategory = async (categoryId: number) => {
    await requestFileRemovalFromCategory(data.id, categoryId);
-    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
  };

  $effect(() => {
-    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => {
+      info = fileInfo;
+      return fileInfo;
+    });
+    info = null;
    isDownloadRequested = false;
    viewerType = undefined;
  });

-  // $effect(() => {
-  //   categories =
-  //     $info?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
-  // });
-
  $effect(() => {
-    if ($info && $info.dataKey && $info.contentIv) {
-      const contentType = $info.contentType;
+    if (info?.dataKey) {
+      const contentType = info.contentType;
      if (contentType.startsWith("image")) {
        viewerType = "image";
      } else if (contentType.startsWith("video")) {
@@ -100,24 +93,24 @@
      }

      untrack(() => {
-        if (!downloadStatus && !isDownloadRequested) {
+        if (!downloadState && !isDownloadRequested) {
          isDownloadRequested = true;
-          requestFileDownload(data.id, $info.contentIv!, $info.dataKey!).then(async (buffer) => {
-            const blob = await updateViewer(buffer, contentType);
-            if (!viewerType) {
-              FileSaver.saveAs(blob, $info.name);
-            }
-          });
+          requestFileDownload(data.id, info!.contentIv!, info!.dataKey!.key).then(
+            async (buffer) => {
+              const blob = await updateViewer(buffer, contentType);
+              if (!viewerType) {
+                FileSaver.saveAs(blob, info!.name);
+              }
+            },
+          );
        }
      });
    }
  });

  $effect(() => {
-    if ($info && $downloadStatus?.status === "decrypted") {
-      untrack(
-        () => !isDownloadRequested && updateViewer($downloadStatus.result!, $info.contentType),
-      );
+    if (info && downloadState?.status === "decrypted") {
+      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentType));
    }
  });

@@ -128,84 +121,88 @@
  <title>파일</title>
 </svelte:head>

-<TopBar title={$info?.name}>
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div onclick={(e) => e.stopPropagation()}>
-    <button
-      onclick={() => (isMenuOpen = !isMenuOpen)}
-      class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-    >
-      <IconMoreVert class="text-2xl" />
-    </button>
-    <TopBarMenu
-      bind:isOpen={isMenuOpen}
-      directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
-        ? $info?.parentId
-        : undefined}
-      {fileBlob}
-      filename={$info?.name}
-    />
-  </div>
-</TopBar>
-<FullscreenDiv>
-  <div class="space-y-4 pb-4">
-    <DownloadStatus status={downloadStatus} />
-    {#if $info && viewerType}
-      <div class="flex w-full justify-center">
-        {#snippet viewerLoading(message: string)}
-          <p class="text-gray-500">{message}</p>
-        {/snippet}
+{#if info}
+  <TopBar title={info.name}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div onclick={(e) => e.stopPropagation()}>
+      <button
+        onclick={() => (isMenuOpen = !isMenuOpen)}
+        class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+      >
+        <IconMoreVert class="text-2xl" />
+      </button>
+      <TopBarMenu
+        bind:isOpen={isMenuOpen}
+        directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
+          ? info.parentId
+          : undefined}
+        {fileBlob}
+        filename={info.name}
+      />
+    </div>
+  </TopBar>
+  <FullscreenDiv>
+    <div class="space-y-4 pb-4">
+      {#if downloadState}
+        <DownloadStatus state={downloadState} />
+      {/if}
+      {#if viewerType}
+        <div class="flex w-full justify-center">
+          {#snippet viewerLoading(message: string)}
+            <p class="text-gray-500">{message}</p>
+          {/snippet}

-        {#if viewerType === "image"}
-          {#if fileBlobUrl}
-            <img src={fileBlobUrl} alt={$info.name} onerror={convertHeicToJpeg} />
-          {:else}
-            {@render viewerLoading("이미지를 불러오고 있어요.")}
+          {#if viewerType === "image"}
+            {#if fileBlobUrl}
+              <img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} />
+            {:else}
+              {@render viewerLoading("이미지를 불러오고 있어요.")}
+            {/if}
+          {:else if viewerType === "video"}
+            {#if fileBlobUrl}
+              <div class="flex flex-col space-y-2">
+                <!-- svelte-ignore a11y_media_has_caption -->
+                <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
+                <IconEntryButton
+                  icon={IconCamera}
+                  onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}
+                  class="w-full"
+                >
+                  이 장면을 썸네일로 설정하기
+                </IconEntryButton>
+              </div>
+            {:else}
+              {@render viewerLoading("비디오를 불러오고 있어요.")}
+            {/if}
          {/if}
-        {:else if viewerType === "video"}
-          {#if fileBlobUrl}
-            <div class="flex flex-col space-y-2">
-              <!-- svelte-ignore a11y_media_has_caption -->
-              <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
-              <IconEntryButton
-                icon={IconCamera}
-                onclick={() => updateThumbnail($info.dataKey!, $info.dataKeyVersion!)}
-                class="w-full"
-              >
-                이 장면을 썸네일로 설정하기
-              </IconEntryButton>
-            </div>
-          {:else}
-            {@render viewerLoading("비디오를 불러오고 있어요.")}
-          {/if}
-        {/if}
-      </div>
-    {/if}
-    <div class="space-y-2">
-      <p class="text-lg font-bold">카테고리</p>
-      <div class="space-y-1">
-        <!-- <Categories
-          {categories}
-          categoryMenuIcon={IconClose}
-          onCategoryClick={({ id }) => goto(`/category/${id}`)}
-          onCategoryMenuClick={({ id }) => removeFromCategory(id)}
-        /> -->
-        <IconEntryButton
-          icon={IconAddCircle}
-          onclick={() => (isAddToCategoryBottomSheetOpen = true)}
-          class="h-12 w-full"
-          iconClass="text-gray-600"
-          textClass="text-gray-700"
-        >
-          카테고리에 추가하기
-        </IconEntryButton>
+        </div>
+      {/if}
+      <div class="space-y-2">
+        <p class="text-lg font-bold">카테고리</p>
+        <div class="space-y-1">
+          <Categories
+            categories={info.categories}
+            categoryMenuIcon={IconClose}
+            onCategoryClick={({ id }) => goto(`/category/${id}`)}
+            onCategoryMenuClick={({ id }) => removeFromCategory(id)}
+          />
+          <IconEntryButton
+            icon={IconAddCircle}
+            onclick={() => (isAddToCategoryBottomSheetOpen = true)}
+            class="h-12 w-full"
+            iconClass="text-gray-600"
+            textClass="text-gray-700"
+          >
+            카테고리에 추가하기
+          </IconEntryButton>
+        </div>
      </div>
    </div>
-  </div>
-</FullscreenDiv>
+  </FullscreenDiv>

-<AddToCategoryBottomSheet
-  bind:isOpen={isAddToCategoryBottomSheetOpen}
-  onAddToCategoryClick={addToCategory}
-/>
+  <AddToCategoryBottomSheet
+    bind:isOpen={isAddToCategoryBottomSheetOpen}
+    onAddToCategoryClick={addToCategory}
+  />
+{/if}