디렉터리 및 카테고리 페이지에서 탐색시의 깜빡임 현상 완화

2026-02-04 08:06:56 +00:00 · 2026-01-06 06:48:35 +09:00
parent ae1d34fc6b
commit 1d3704bfad
10 changed files with 405 additions and 296 deletions
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -9,6 +9,7 @@
  import { captureVideoThumbnail } from "$lib/modules/thumbnail";
  import { getFileDownloadState } from "$lib/modules/file";
  import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
  import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
  import DownloadStatus from "./DownloadStatus.svelte";
  import {
@@ -26,8 +27,7 @@

  let { data } = $props();

-  let infoPromise: Promise<MaybeFileInfo> | undefined = $state();
-  let info: FileInfo | null = $state(null);
+  let info: MaybeFileInfo | undefined = $state();
  let downloadState = $derived(getFileDownloadState(data.id));

  let isMenuOpen = $state(false);
@@ -65,22 +65,20 @@
  const addToCategory = async (categoryId: number) => {
    await requestFileAdditionToCategory(data.id, categoryId);
    isAddToCategoryBottomSheetOpen = false;
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
  };

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

  $effect(() => {
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => {
-      if (fileInfo.exists) {
-        info = fileInfo;
+    HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
+      if (data.id === result.id) {
+        info = result;
      }
-      return fileInfo;
    });
-    info = null;
    isDownloadRequested = false;
    viewerType = undefined;
  });
@@ -111,8 +109,8 @@
  });

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

@@ -123,87 +121,85 @@
  <title>파일</title>
 </svelte:head>

-{#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}
+<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 info && 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}
-          {:else if viewerType === "video"}
-            {#if fileBlobUrl}
-              <div class="flex flex-col space-y-2">
-                <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 viewerType === "image"}
+          {#if fileBlobUrl}
+            <img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} />
+          {:else}
+            {@render viewerLoading("이미지를 불러오고 있어요.")}
          {/if}
-        </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>
+        {:else if viewerType === "video"}
+          {#if fileBlobUrl}
+            <div class="flex flex-col space-y-2">
+              <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}
+      </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>
-  </FullscreenDiv>
+  </div>
+</FullscreenDiv>

-  <AddToCategoryBottomSheet
-    bind:isOpen={isAddToCategoryBottomSheetOpen}
-    onAddToCategoryClick={addToCategory}
-  />
-{/if}
+<AddToCategoryBottomSheet
+  bind:isOpen={isAddToCategoryBottomSheetOpen}
+  onAddToCategoryClick={addToCategory}
+/>
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -4,6 +4,7 @@
  import { CategoryCreateModal } from "$lib/components/organisms";
  import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
  import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
  import { requestCategoryCreation } from "./service";

  interface Props {
@@ -13,48 +14,50 @@

  let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();

-  let categoryInfoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
+  let categoryInfo: MaybeCategoryInfo | undefined = $state();

  let isCategoryCreateModalOpen = $state(false);

  $effect(() => {
    if (isOpen) {
-      categoryInfoPromise = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+      HybridPromise.resolve(getCategoryInfo("root", $masterKeyStore?.get(1)?.key!)).then(
+        (result) => (categoryInfo = result),
+      );
    }
  });
 </script>

-{#await categoryInfoPromise then categoryInfo}
-  {#if categoryInfo?.exists}
-    <BottomSheet bind:isOpen class="flex flex-col">
-      <FullscreenDiv>
-        <SubCategories
-          class="py-4"
-          info={categoryInfo}
-          onSubCategoryClick={({ id }) =>
-            (categoryInfoPromise = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
-          onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-          subCategoryCreatePosition="top"
-        />
-        {#if categoryInfo.id !== "root"}
-          <BottomDiv>
-            <Button onclick={() => onAddToCategoryClick(categoryInfo.id)} class="w-full">
-              이 카테고리에 추가하기
-            </Button>
-          </BottomDiv>
-        {/if}
-      </FullscreenDiv>
-    </BottomSheet>
+{#if categoryInfo?.exists}
+  <BottomSheet bind:isOpen class="flex flex-col">
+    <FullscreenDiv>
+      <SubCategories
+        class="py-4"
+        info={categoryInfo}
+        onSubCategoryClick={({ id }) =>
+          HybridPromise.resolve(getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)).then(
+            (result) => (categoryInfo = result),
+          )}
+        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+        subCategoryCreatePosition="top"
+      />
+      {#if categoryInfo.id !== "root"}
+        <BottomDiv>
+          <Button onclick={() => onAddToCategoryClick(categoryInfo!.id as number)} class="w-full">
+            {categoryInfo!.name} 카테고리에 추가하기
+          </Button>
+        </BottomDiv>
+      {/if}
+    </FullscreenDiv>
+  </BottomSheet>
+{/if}

-    <CategoryCreateModal
-      bind:isOpen={isCategoryCreateModalOpen}
-      onCreateClick={async (name: string) => {
-        if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) {
-          categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-          return true;
-        }
-        return false;
-      }}
-    />
-  {/if}
-{/await}
+<CategoryCreateModal
+  bind:isOpen={isCategoryCreateModalOpen}
+  onCreateClick={async (name: string) => {
+    if (await requestCategoryCreation(name, categoryInfo!.id, $masterKeyStore?.get(1)!)) {
+      void getCategoryInfo(categoryInfo!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>