카테고리 페이지에서의 네트워크 호출 최적화

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -6,12 +6,7 @@
   import { page } from "$app/state";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { Categories, IconEntryButton, TopBar } from "$lib/components/molecules";
-  import {
-    getFileInfo,
-    getCategoryInfo,
-    type FileInfo,
-    type CategoryInfo,
-  } from "$lib/modules/filesystem";
+  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
   import { captureVideoThumbnail } from "$lib/modules/thumbnail";
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
@@ -32,7 +27,7 @@
   let { data } = $props();
 
   let info: Writable<FileInfo | null> | undefined = $state();
-  let categories: Writable<CategoryInfo | null>[] = $state([]);
+  // let categories: Writable<CategoryInfo | null>[] = $state([]);
 
   let isMenuOpen = $state(false);
   let isAddToCategoryBottomSheetOpen = $state(false);
@@ -90,10 +85,10 @@
     viewerType = undefined;
   });
 
-  $effect(() => {
-    categories =
-      $info?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
-  });
+  // $effect(() => {
+  //   categories =
+  //     $info?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
+  // });
 
   $effect(() => {
     if ($info && $info.dataKey && $info.contentIv) {
@@ -190,12 +185,12 @@
     <div class="space-y-2">
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
-        <Categories
+        <!-- <Categories
           {categories}
           categoryMenuIcon={IconClose}
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}
-        />
+        /> -->
         <IconEntryButton
           icon={IconAddCircle}
           onclick={() => (isAddToCategoryBottomSheetOpen = true)}

src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
   import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
   import { SubCategories } from "$lib/components/molecules";
   import { CategoryCreateModal } from "$lib/components/organisms";
-  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
@@ -14,46 +13,48 @@
 
   let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
 
-  let category: Writable<CategoryInfo | null> | undefined = $state();
+  let categoryInfoPromise: Promise<CategoryInfo | null> | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
 
   $effect(() => {
     if (isOpen) {
-      category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+      categoryInfoPromise = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
     }
   });
 </script>
 
-{#if $category}
-  <BottomSheet bind:isOpen class="flex flex-col">
-    <FullscreenDiv>
-      <SubCategories
-        class="py-4"
-        info={$category}
-        onSubCategoryClick={({ id }) =>
-          (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
-        onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-        subCategoryCreatePosition="top"
-      />
-      {#if $category.id !== "root"}
-        <BottomDiv>
-          <Button onclick={() => onAddToCategoryClick($category.id)} class="w-full">
-            이 카테고리에 추가하기
-          </Button>
-        </BottomDiv>
-      {/if}
-    </FullscreenDiv>
-  </BottomSheet>
-{/if}
+{#await categoryInfoPromise then categoryInfo}
+  {#if categoryInfo}
+    <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>
 
-<CategoryCreateModal
-  bind:isOpen={isCategoryCreateModalOpen}
-  onCreateClick={async (name: string) => {
-    if (await requestCategoryCreation(name, $category!.id, $masterKeyStore?.get(1)!)) {
-      category = getCategoryInfo($category!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-      return true;
-    }
-    return false;
-  }}
-/>
+    <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}