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

src/lib/components/atoms/RowVirtualizer.svelte

@@ -16,7 +16,7 @@
   let element: HTMLElement | undefined = $state();
   let scrollMargin = $state(0);
 
-  const virtualizer = $derived(
+  let virtualizer = $derived(
     createWindowVirtualizer({
       count,
       estimateSize: itemHeight,

src/lib/components/molecules/Categories/Categories.svelte

@@ -1,59 +1,29 @@
 <script lang="ts">
-  import { untrack, type Component } from "svelte";
+  import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
-  import { get, type Writable } from "svelte/store";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import type { SubCategoryInfo } from "$lib/modules/filesystem2.svelte";
   import { SortBy, sortEntries } from "$lib/utils";
   import Category from "./Category.svelte";
   import type { SelectedCategory } from "./service";
 
   interface Props {
-    categories: Writable<CategoryInfo | null>[];
+    categories: SubCategoryInfo[];
     categoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
     onCategoryClick: (category: SelectedCategory) => void;
     onCategoryMenuClick?: (category: SelectedCategory) => void;
     sortBy?: SortBy;
   }
 
-  let {
-    categories,
-    categoryMenuIcon,
-    onCategoryClick,
-    onCategoryMenuClick,
-    sortBy = SortBy.NAME_ASC,
-  }: Props = $props();
+  let { categories, categoryMenuIcon, onCategoryClick, onCategoryMenuClick }: Props = $props();
 
-  let categoriesWithName: { name?: string; info: Writable<CategoryInfo | null> }[] = $state([]);
-
-  $effect(() => {
-    categoriesWithName = categories.map((category) => ({
-      name: get(category)?.name,
-      info: category,
-    }));
-
-    const sort = () => {
-      sortEntries(categoriesWithName, sortBy);
-    };
-    return untrack(() => {
-      sort();
-
-      const unsubscribes = categoriesWithName.map((category) =>
-        category.info.subscribe((value) => {
-          if (category.name === value?.name) return;
-          category.name = value?.name;
-          sort();
-        }),
-      );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
-  });
+  let categoriesWithName = $derived(sortEntries(structuredClone($state.snapshot(categories))));
 </script>
 
 {#if categoriesWithName.length > 0}
   <div class="space-y-1">
-    {#each categoriesWithName as { info }}
+    {#each categoriesWithName as category}
       <Category
-        {info}
+        info={category}
         menuIcon={categoryMenuIcon}
         onclick={onCategoryClick}
         onMenuClick={onCategoryMenuClick}

src/lib/components/molecules/Categories/Category.svelte

@@ -1,43 +1,26 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
-  import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { CategoryLabel } from "$lib/components/molecules";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import type { SubCategoryInfo } from "$lib/modules/filesystem2.svelte";
   import type { SelectedCategory } from "./service";
 
   interface Props {
-    info: Writable<CategoryInfo | null>;
+    info: SubCategoryInfo;
     menuIcon?: Component<SvelteHTMLElements["svg"]>;
     onclick: (category: SelectedCategory) => void;
     onMenuClick?: (category: SelectedCategory) => void;
   }
 
   let { info, menuIcon, onclick, onMenuClick }: Props = $props();
-
-  const openCategory = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onclick({ id, dataKey, dataKeyVersion, name });
-  };
-
-  const openMenu = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onMenuClick!({ id, dataKey, dataKeyVersion, name });
-  };
 </script>
 
-{#if $info}
-  <ActionEntryButton
-    class="h-12"
-    onclick={openCategory}
-    actionButtonIcon={menuIcon}
-    onActionButtonClick={openMenu}
-  >
-    <CategoryLabel name={$info.name!} />
-  </ActionEntryButton>
-{/if}
+<ActionEntryButton
+  class="h-12"
+  onclick={() => onclick(info)}
+  actionButtonIcon={menuIcon}
+  onActionButtonClick={() => onMenuClick?.(info)}
+>
+  <CategoryLabel name={info.name} />
+</ActionEntryButton>

src/lib/components/molecules/Categories/service.ts

@@ -1,6 +1,5 @@
 export interface SelectedCategory {
   id: number;
-  dataKey: CryptoKey;
-  dataKeyVersion: Date;
+  dataKey?: { key: CryptoKey; version: Date };
   name: string;
 }

src/lib/components/molecules/SubCategories.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import type { Writable } from "svelte/store";
   import { Categories, IconEntryButton, type SelectedCategory } from "$lib/components/molecules";
-  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
+  import type { CategoryInfo } from "$lib/modules/filesystem2.svelte";
 
   import IconAddCircle from "~icons/material-symbols/add-circle";
 
@@ -27,14 +25,6 @@
     subCategoryCreatePosition = "bottom",
     subCategoryMenuIcon,
   }: Props = $props();
-
-  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
-
-  $effect(() => {
-    subCategories = info.subCategoryIds.map((id) =>
-      getCategoryInfo(id, $masterKeyStore?.get(1)?.key!),
-    );
-  });
 </script>
 
 <div class={["space-y-1", className]}>
@@ -53,14 +43,12 @@
   {#if subCategoryCreatePosition === "top"}
     {@render subCategoryCreate()}
   {/if}
-  {#key info}
-    <Categories
-      categories={subCategories}
-      categoryMenuIcon={subCategoryMenuIcon}
-      onCategoryClick={onSubCategoryClick}
-      onCategoryMenuClick={onSubCategoryMenuClick}
-    />
-  {/key}
+  <Categories
+    categories={info.subCategories}
+    categoryMenuIcon={subCategoryMenuIcon}
+    onCategoryClick={onSubCategoryClick}
+    onCategoryMenuClick={onSubCategoryMenuClick}
+  />
   {#if subCategoryCreatePosition === "bottom"}
     {@render subCategoryCreate()}
   {/if}

src/lib/components/organisms/Category/Category.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
   import { CheckBox, RowVirtualizer } from "$lib/components/atoms";
   import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
-  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
-  import { SortBy, sortEntries } from "$lib/utils";
+  import type { CategoryInfo } from "$lib/modules/filesystem2.svelte";
+  import { sortEntries } from "$lib/utils";
   import File from "./File.svelte";
   import type { SelectedFile } from "./service";
 
@@ -13,13 +10,12 @@
 
   interface Props {
     info: CategoryInfo;
+    isFileRecursive: boolean | undefined;
     onFileClick: (file: SelectedFile) => void;
     onFileRemoveClick: (file: SelectedFile) => void;
     onSubCategoryClick: (subCategory: SelectedCategory) => void;
     onSubCategoryCreateClick: () => void;
     onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
-    sortBy?: SortBy;
-    isFileRecursive: boolean;
   }
 
   let {
@@ -29,43 +25,16 @@
     onSubCategoryClick,
     onSubCategoryCreateClick,
     onSubCategoryMenuClick,
-    sortBy = SortBy.NAME_ASC,
     isFileRecursive = $bindable(),
   }: Props = $props();
 
-  let files: { name?: string; info: Writable<FileInfo | null>; isRecursive: boolean }[] = $state(
-    [],
-  );
-
-  $effect(() => {
-    files =
+  let files = $derived(
+    sortEntries(
       info.files
-        ?.filter(({ isRecursive }) => isFileRecursive || !isRecursive)
-        .map(({ id, isRecursive }) => {
-          const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
-          return {
-            name: get(info)?.name,
-            info,
-            isRecursive,
-          };
-        }) ?? [];
-
-    const sort = () => {
-      sortEntries(files, sortBy);
-    };
-    return untrack(() => {
-      sort();
-
-      const unsubscribes = files.map((file) =>
-        file.info.subscribe((value) => {
-          if (file.name === value?.name) return;
-          file.name = value?.name;
-          sort();
-        }),
-      );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
-  });
+        ?.map((file) => ({ name: file.name, details: file }))
+        .filter(({ details }) => isFileRecursive || !details.isRecursive) ?? [],
+    ),
+  );
 </script>
 
 <div class="space-y-4">
@@ -89,26 +58,24 @@
           <p class="font-medium">하위 카테고리의 파일</p>
         </CheckBox>
       </div>
-      {#key info}
-        <RowVirtualizer
-          count={files.length}
-          itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
-        >
-          {#snippet item(index)}
-            {@const { info, isRecursive } = files[index]!}
-            <div class={[index + 1 < files.length && "pb-1"]}>
-              <File
-                {info}
-                onclick={onFileClick}
-                onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
-              />
-            </div>
-          {/snippet}
-          {#snippet placeholder()}
-            <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
-          {/snippet}
-        </RowVirtualizer>
-      {/key}
+      <RowVirtualizer
+        count={files.length}
+        itemHeight={(index) => 48 + (index + 1 < files.length ? 4 : 0)}
+      >
+        {#snippet item(index)}
+          {@const { details } = files[index]!}
+          <div class={[index + 1 < files.length && "pb-1"]}>
+            <File
+              info={details}
+              onclick={onFileClick}
+              onRemoveClick={!details.isRecursive ? onFileRemoveClick : undefined}
+            />
+          </div>
+        {/snippet}
+        {#snippet placeholder()}
+          <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
+        {/snippet}
+      </RowVirtualizer>
     </div>
   {/if}
 </div>

src/lib/components/organisms/Category/File.svelte

@@ -1,59 +1,38 @@
 <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 { requestFileThumbnailDownload, type SelectedFile } from "./service";
+  import type { CategoryFileInfo } from "$lib/modules/filesystem2.svelte";
+  import { requestFileThumbnailDownload } from "$lib/services/file";
+  import type { SelectedFile } from "./service";
 
   import IconClose from "~icons/material-symbols/close";
 
   interface Props {
-    info: Writable<FileInfo | null>;
-    onclick: (selectedFile: SelectedFile) => void;
-    onRemoveClick?: (selectedFile: SelectedFile) => void;
+    info: CategoryFileInfo;
+    onclick: (file: SelectedFile) => void;
+    onRemoveClick?: (file: SelectedFile) => void;
   }
 
   let { info, onclick, onRemoveClick }: Props = $props();
 
-  let thumbnail: string | undefined = $state();
-
-  const openFile = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onclick({ id, dataKey, dataKeyVersion, name });
-  };
-
-  const removeFile = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onRemoveClick!({ 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;
-    }
-  });
+  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}
-  <ActionEntryButton
-    class="h-12"
-    onclick={openFile}
-    actionButtonIcon={onRemoveClick && IconClose}
-    onActionButtonClick={removeFile}
-  >
-    <DirectoryEntryLabel type="file" {thumbnail} name={$info.name} />
-  </ActionEntryButton>
-{/if}
+<ActionEntryButton
+  class="h-12"
+  onclick={() => onclick(info)}
+  actionButtonIcon={onRemoveClick && IconClose}
+  onActionButtonClick={() => onRemoveClick?.(info)}
+>
+  {#await thumbnailPromise}
+    <DirectoryEntryLabel type="file" name={info.name} />
+  {:then thumbnail}
+    <DirectoryEntryLabel type="file" thumbnail={thumbnail ?? undefined} name={info.name} />
+  {/await}
+</ActionEntryButton>

src/lib/components/organisms/Category/service.ts

@@ -1,8 +1,4 @@
-export { requestFileThumbnailDownload } from "$lib/services/file";
-
 export interface SelectedFile {
   id: number;
-  dataKey: CryptoKey;
-  dataKeyVersion: Date;
   name: string;
 }