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

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 { SubCategoryInfo } from "$lib/modules/filesystem2.svelte";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
   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 {
+  let { categories, categoryMenuIcon, onCategoryClick, onCategoryMenuClick }: Props = $props();
-    categories,
-    categoryMenuIcon,
-    onCategoryClick,
-    onCategoryMenuClick,
-    sortBy = SortBy.NAME_ASC,
-  }: Props = $props();
 
-  let categoriesWithName: { name?: string; info: Writable<CategoryInfo | null> }[] = $state([]);
+  let categoriesWithName = $derived(sortEntries(structuredClone($state.snapshot(categories))));
-
-  $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());
-    });
-  });
 </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
-  <ActionEntryButton
   class="h-12"
-    onclick={openCategory}
+  onclick={() => onclick(info)}
   actionButtonIcon={menuIcon}
-    onActionButtonClick={openMenu}
+  onActionButtonClick={() => onMenuClick?.(info)}
-  >
+>
-    <CategoryLabel name={$info.name!} />
+  <CategoryLabel name={info.name} />
-  </ActionEntryButton>
+</ActionEntryButton>
-{/if}

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

@@ -1,6 +1,5 @@
 export interface SelectedCategory {
   id: number;
-  dataKey: CryptoKey;
+  dataKey?: { key: CryptoKey; version: Date };
-  dataKeyVersion: 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 type { CategoryInfo } from "$lib/modules/filesystem2.svelte";
-  import { masterKeyStore } from "$lib/stores";
 
   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}
+    categories={info.subCategories}
     categoryMenuIcon={subCategoryMenuIcon}
     onCategoryClick={onSubCategoryClick}
     onCategoryMenuClick={onSubCategoryMenuClick}
   />
-  {/key}
   {#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 type { CategoryInfo } from "$lib/modules/filesystem2.svelte";
-  import { masterKeyStore } from "$lib/stores";
+  import { sortEntries } from "$lib/utils";
-  import { SortBy, 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(
+  let files = $derived(
-    [],
+    sortEntries(
-  );
-
-  $effect(() => {
-    files =
       info.files
-        ?.filter(({ isRecursive }) => isFileRecursive || !isRecursive)
+        ?.map((file) => ({ name: file.name, details: file }))
-        .map(({ id, isRecursive }) => {
+        .filter(({ details }) => isFileRecursive || !details.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());
-    });
-  });
 </script>
 
 <div class="space-y-4">
@@ -89,18 +58,17 @@
           <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]!}
+          {@const { details } = files[index]!}
           <div class={[index + 1 < files.length && "pb-1"]}>
             <File
-                {info}
+              info={details}
               onclick={onFileClick}
-                onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
+              onRemoveClick={!details.isRecursive ? onFileRemoveClick : undefined}
             />
           </div>
         {/snippet}
@@ -108,7 +76,6 @@
           <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
         {/snippet}
       </RowVirtualizer>
-      {/key}
     </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 type { CategoryFileInfo } from "$lib/modules/filesystem2.svelte";
-  import { requestFileThumbnailDownload, type SelectedFile } from "./service";
+  import { requestFileThumbnailDownload } from "$lib/services/file";
+  import type { SelectedFile } from "./service";
 
   import IconClose from "~icons/material-symbols/close";
 
   interface Props {
-    info: Writable<FileInfo | null>;
+    info: CategoryFileInfo;
-    onclick: (selectedFile: SelectedFile) => void;
+    onclick: (file: SelectedFile) => void;
-    onRemoveClick?: (selectedFile: SelectedFile) => void;
+    onRemoveClick?: (file: SelectedFile) => void;
   }
 
   let { info, onclick, onRemoveClick }: Props = $props();
 
-  let thumbnail: string | undefined = $state();
+  let showThumbnail = $derived(
-
+    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
-  const openFile = () => {
+  );
-    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+  let thumbnailPromise = $derived(
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
-
+  );
-    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;
-    }
-  });
 </script>
 
-{#if $info}
+<ActionEntryButton
-  <ActionEntryButton
   class="h-12"
-    onclick={openFile}
+  onclick={() => onclick(info)}
   actionButtonIcon={onRemoveClick && IconClose}
-    onActionButtonClick={removeFile}
+  onActionButtonClick={() => onRemoveClick?.(info)}
-  >
+>
-    <DirectoryEntryLabel type="file" {thumbnail} name={$info.name} />
+  {#await thumbnailPromise}
-  </ActionEntryButton>
+    <DirectoryEntryLabel type="file" name={info.name} />
-{/if}
+  {: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;
 }

src/lib/modules/filesystem.ts

@@ -3,11 +3,6 @@ import {
   getFileInfo as getFileInfoFromIndexedDB,
   storeFileInfo,
   deleteFileInfo,
-  getCategoryInfos as getCategoryInfosFromIndexedDB,
-  getCategoryInfo as getCategoryInfoFromIndexedDB,
-  storeCategoryInfo,
-  updateCategoryInfo as updateCategoryInfoInIndexedDB,
-  deleteCategoryInfo,
 } from "$lib/indexedDB";
 import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
 import { trpc, isTRPCClientError } from "$trpc/client";
@@ -25,28 +20,7 @@ export interface FileInfo {
   categoryIds: number[];
 }
 
-export type CategoryInfo =
-  | {
-      id: "root";
-      dataKey?: undefined;
-      dataKeyVersion?: undefined;
-      name?: undefined;
-      subCategoryIds: number[];
-      files?: undefined;
-      isFileRecursive?: undefined;
-    }
-  | {
-      id: number;
-      dataKey?: CryptoKey;
-      dataKeyVersion?: Date;
-      name: string;
-      subCategoryIds: number[];
-      files: { id: number; isRecursive: boolean }[];
-      isFileRecursive: boolean;
-    };
-
 const fileInfoStore = new Map<number, Writable<FileInfo | null>>();
-const categoryInfoStore = new Map<CategoryId, Writable<CategoryInfo | null>>();
 
 const fetchFileInfoFromIndexedDB = async (id: number, info: Writable<FileInfo | null>) => {
   if (get(info)) return;
@@ -130,124 +104,3 @@ export const getFileInfo = (fileId: number, masterKey: CryptoKey) => {
   fetchFileInfo(fileId, info, masterKey); // Intended
   return info;
 };
-
-const fetchCategoryInfoFromIndexedDB = async (
-  id: CategoryId,
-  info: Writable<CategoryInfo | null>,
-) => {
-  if (get(info)) return;
-
-  const [category, subCategories] = await Promise.all([
-    id !== "root" ? getCategoryInfoFromIndexedDB(id) : undefined,
-    getCategoryInfosFromIndexedDB(id),
-  ]);
-  const subCategoryIds = subCategories.map(({ id }) => id);
-
-  if (id === "root") {
-    info.set({ id, subCategoryIds });
-  } else {
-    if (!category) return;
-    info.set({
-      id,
-      name: category.name,
-      subCategoryIds,
-      files: category.files,
-      isFileRecursive: category.isFileRecursive,
-    });
-  }
-};
-
-const fetchCategoryInfoFromServer = async (
-  id: CategoryId,
-  info: Writable<CategoryInfo | null>,
-  masterKey: CryptoKey,
-) => {
-  let data;
-  try {
-    data = await trpc().category.get.query({ id });
-  } catch (e) {
-    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      info.set(null);
-      await deleteCategoryInfo(id as number);
-      return;
-    }
-    throw new Error("Failed to fetch category information");
-  }
-
-  const { metadata, subCategories } = data;
-
-  if (id === "root") {
-    info.set({ id, subCategoryIds: subCategories });
-  } else {
-    const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
-    const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
-
-    let files;
-    try {
-      files = await trpc().category.files.query({ id, recurse: true });
-    } catch {
-      throw new Error("Failed to fetch category files");
-    }
-
-    const filesMapped = files.map(({ file, isRecursive }) => ({ id: file, isRecursive }));
-    let isFileRecursive: boolean | undefined = undefined;
-
-    info.update((value) => {
-      const newValue = {
-        isFileRecursive: false,
-        ...value,
-        id,
-        dataKey,
-        dataKeyVersion: new Date(metadata!.dekVersion),
-        name,
-        subCategoryIds: subCategories,
-        files: filesMapped,
-      };
-      isFileRecursive = newValue.isFileRecursive;
-      return newValue;
-    });
-    await storeCategoryInfo({
-      id,
-      parentId: metadata!.parent,
-      name,
-      files: filesMapped,
-      isFileRecursive: isFileRecursive!,
-    });
-  }
-};
-
-const fetchCategoryInfo = async (
-  id: CategoryId,
-  info: Writable<CategoryInfo | null>,
-  masterKey: CryptoKey,
-) => {
-  await fetchCategoryInfoFromIndexedDB(id, info);
-  await fetchCategoryInfoFromServer(id, info, masterKey);
-};
-
-export const getCategoryInfo = (categoryId: CategoryId, masterKey: CryptoKey) => {
-  // TODO: MEK rotation
-
-  let info = categoryInfoStore.get(categoryId);
-  if (!info) {
-    info = writable(null);
-    categoryInfoStore.set(categoryId, info);
-  }
-
-  fetchCategoryInfo(categoryId, info, masterKey); // Intended
-  return info;
-};
-
-export const updateCategoryInfo = async (
-  categoryId: number,
-  changes: { isFileRecursive?: boolean },
-) => {
-  await updateCategoryInfoInIndexedDB(categoryId, changes);
-  categoryInfoStore.get(categoryId)?.update((value) => {
-    if (!value) return value;
-    if (changes.isFileRecursive !== undefined) {
-      value.isFileRecursive = changes.isFileRecursive;
-    }
-    return value;
-  });
-};

src/lib/modules/filesystem2.svelte.ts

@@ -54,13 +54,14 @@ interface FileInfo {
 }
 
 export type SummarizedFileInfo = Omit<FileInfo, "parentId" | "contentIv" | "categories">;
+export type CategoryFileInfo = SummarizedFileInfo & { isRecursive: boolean };
 
 interface LocalCategoryInfo {
   id: number;
-  dataKey: DataKey | undefined;
+  dataKey?: DataKey | undefined;
   name: string;
-  subCategories: Omit<LocalCategoryInfo, "subCategories" | "files" | "isFileRecursive">[];
+  subCategories: SubCategoryInfo[];
-  files: { id: number; name: string; isRecursive: boolean }[];
+  files: CategoryFileInfo[];
   isFileRecursive: boolean;
 }
 
@@ -68,13 +69,19 @@ interface RootCategoryInfo {
   id: "root";
   dataKey?: undefined;
   name?: undefined;
-  subCategories: Omit<LocalCategoryInfo, "subCategories" | "files" | "isFileRecursive">[];
+  subCategories: SubCategoryInfo[];
   files?: undefined;
+  isFileRecursive?: undefined;
 }
 
 export type CategoryInfo = LocalCategoryInfo | RootCategoryInfo;
+export type SubCategoryInfo = Omit<
+  LocalCategoryInfo,
+  "subCategories" | "files" | "isFileRecursive"
+>;
 
 const directoryInfoCache = new Map<DirectoryId, DirectoryInfo | Promise<DirectoryInfo>>();
+const categoryInfoCache = new Map<CategoryId, CategoryInfo | Promise<CategoryInfo>>();
 
 export const getDirectoryInfo = async (id: DirectoryId, masterKey: CryptoKey) => {
   const info = directoryInfoCache.get(id);
@@ -189,3 +196,146 @@ const fetchDirectoryInfoFromServer = async (
 const decryptDate = async (ciphertext: string, iv: string, dataKey: CryptoKey) => {
   return new Date(parseInt(await decryptString(ciphertext, iv, dataKey), 10));
 };
+
+export const getCategoryInfo = async (id: CategoryId, masterKey: CryptoKey) => {
+  const info = categoryInfoCache.get(id);
+  if (info instanceof Promise) {
+    return info;
+  }
+
+  const { promise, resolve } = Promise.withResolvers<CategoryInfo>();
+  if (!info) {
+    categoryInfoCache.set(id, promise);
+    const categoryInfo = await fetchCategoryInfoFromIndexedDB(id);
+    if (categoryInfo) {
+      const state = $state(categoryInfo);
+      categoryInfoCache.set(id, state);
+      resolve(state);
+    }
+  }
+
+  fetchCategoryInfoFromServer(id, masterKey).then((categoryInfo) => {
+    if (!categoryInfo) return;
+
+    let info = categoryInfoCache.get(id);
+    if (info instanceof Promise) {
+      const state = $state(categoryInfo);
+      categoryInfoCache.set(id, state);
+      resolve(state);
+    } else {
+      Object.assign(info!, categoryInfo);
+      resolve(info!);
+    }
+  });
+
+  return info ?? promise;
+};
+
+const fetchCategoryInfoFromIndexedDB = async (
+  id: CategoryId,
+): Promise<CategoryInfo | undefined> => {
+  const [category, subCategories] = await Promise.all([
+    id !== "root" ? getCategoryInfoFromIndexedDB(id) : undefined,
+    getCategoryInfosFromIndexedDB(id),
+  ]);
+  const files = category
+    ? await Promise.all(
+        category.files.map(async (file) => {
+          const fileInfo = await getFileInfoFromIndexedDB(file.id);
+          return fileInfo
+            ? {
+                id: file.id,
+                contentType: fileInfo.contentType,
+                name: fileInfo.name,
+                createdAt: fileInfo.createdAt,
+                lastModifiedAt: fileInfo.lastModifiedAt,
+                isRecursive: file.isRecursive,
+              }
+            : undefined;
+        }),
+      )
+    : undefined;
+
+  if (id === "root") {
+    return { id, subCategories };
+  } else if (category) {
+    return {
+      id,
+      name: category.name,
+      subCategories,
+      files: files!.filter((file) => !!file),
+      isFileRecursive: category.isFileRecursive,
+    };
+  }
+};
+
+const fetchCategoryInfoFromServer = async (
+  id: CategoryId,
+  masterKey: CryptoKey,
+): Promise<CategoryInfo | undefined> => {
+  try {
+    const {
+      metadata,
+      subCategories: subCategoriesRaw,
+      files: filesRaw,
+    } = await trpc().category.get.query({ id, recurse: true });
+    const [subCategories, files] = await Promise.all([
+      Promise.all(
+        subCategoriesRaw.map(async (category) => {
+          const { dataKey } = await unwrapDataKey(category.dek, masterKey);
+          const name = await decryptString(category.name, category.nameIv, dataKey);
+          return {
+            id: category.id,
+            dataKey: { key: dataKey, version: category.dekVersion },
+            name,
+          };
+        }),
+      ),
+      id !== "root"
+        ? Promise.all(
+            filesRaw!.map(async (file) => {
+              const { dataKey } = await unwrapDataKey(file.dek, masterKey);
+              const [name, createdAt, lastModifiedAt] = await Promise.all([
+                decryptString(file.name, file.nameIv, dataKey),
+                file.createdAt
+                  ? decryptDate(file.createdAt, file.createdAtIv!, dataKey)
+                  : undefined,
+                decryptDate(file.lastModifiedAt, file.lastModifiedAtIv, dataKey),
+              ]);
+              return {
+                id: file.id,
+                dataKey: { key: dataKey, version: file.dekVersion },
+                contentType: file.contentType,
+                name,
+                createdAt,
+                lastModifiedAt,
+                isRecursive: file.isRecursive,
+              };
+            }),
+          )
+        : undefined,
+    ]);
+
+    if (id === "root") {
+      return { id, subCategories };
+    } else {
+      const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
+      const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
+      return {
+        id,
+        dataKey: { key: dataKey, version: metadata!.dekVersion },
+        name,
+        subCategories,
+        files: files!,
+        isFileRecursive: false,
+      };
+    }
+  } catch (e) {
+    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
+      categoryInfoCache.delete(id);
+      await deleteCategoryInfo(id as number);
+      return;
+    }
+    throw new Error("Failed to fetch category information");
+  }
+};

src/lib/server/db/file.ts

@@ -304,39 +304,51 @@ export const getAllFilesByCategory = async (
   recurse: boolean,
 ) => {
   const files = await db
-    .withRecursive("cte", (db) =>
+    .withRecursive("category_tree", (db) =>
       db
         .selectFrom("category")
-        .leftJoin("file_category", "category.id", "file_category.category_id")
+        .select(["id", sql<number>`0`.as("depth")])
-        .select(["id", "parent_id", "user_id", "file_category.file_id"])
-        .select(sql<number>`0`.as("depth"))
         .where("id", "=", categoryId)
+        .where("user_id", "=", userId)
         .$if(recurse, (qb) =>
           qb.unionAll((db) =>
             db
               .selectFrom("category")
-              .leftJoin("file_category", "category.id", "file_category.category_id")
+              .innerJoin("category_tree", "category.parent_id", "category_tree.id")
-              .innerJoin("cte", "category.parent_id", "cte.id")
+              .select(["category.id", sql<number>`depth + 1`.as("depth")]),
-              .select([
-                "category.id",
-                "category.parent_id",
-                "category.user_id",
-                "file_category.file_id",
-              ])
-              .select(sql<number>`cte.depth + 1`.as("depth")),
           ),
         ),
     )
-    .selectFrom("cte")
+    .selectFrom("category_tree")
+    .innerJoin("file_category", "category_tree.id", "file_category.category_id")
+    .innerJoin("file", "file_category.file_id", "file.id")
     .select(["file_id", "depth"])
+    .selectAll("file")
     .distinctOn("file_id")
-    .where("user_id", "=", userId)
-    .where("file_id", "is not", null)
-    .$narrowType<{ file_id: NotNull }>()
     .orderBy("file_id")
     .orderBy("depth")
     .execute();
-  return files.map(({ file_id, depth }) => ({ id: file_id, isRecursive: depth > 0 }));
+  return files.map(
+    (file) =>
+      ({
+        id: file.file_id,
+        parentId: file.parent_id ?? "root",
+        userId: file.user_id,
+        path: file.path,
+        mekVersion: file.master_encryption_key_version,
+        encDek: file.encrypted_data_encryption_key,
+        dekVersion: file.data_encryption_key_version,
+        hskVersion: file.hmac_secret_key_version,
+        contentHmac: file.content_hmac,
+        contentType: file.content_type,
+        encContentIv: file.encrypted_content_iv,
+        encContentHash: file.encrypted_content_hash,
+        encName: file.encrypted_name,
+        encCreatedAt: file.encrypted_created_at,
+        encLastModifiedAt: file.encrypted_last_modified_at,
+        isRecursive: file.depth > 0,
+      }) satisfies File & { isRecursive: boolean },
+  );
 };
 
 export const getAllFileIds = async (userId: number) => {

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 {
+  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
-    getFileInfo,
-    getCategoryInfo,
-    type FileInfo,
-    type CategoryInfo,
-  } 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(() => {
+  // $effect(() => {
-    categories =
+  //   categories =
-      $info?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
+  //     $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}
+{#await categoryInfoPromise then categoryInfo}
+  {#if categoryInfo}
     <BottomSheet bind:isOpen class="flex flex-col">
       <FullscreenDiv>
         <SubCategories
           class="py-4"
-        info={$category}
+          info={categoryInfo}
           onSubCategoryClick={({ id }) =>
-          (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
+            (categoryInfoPromise = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
           onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
           subCategoryCreatePosition="top"
         />
-      {#if $category.id !== "root"}
+        {#if categoryInfo.id !== "root"}
           <BottomDiv>
-          <Button onclick={() => onAddToCategoryClick($category.id)} class="w-full">
+            <Button onclick={() => onAddToCategoryClick(categoryInfo.id)} class="w-full">
               이 카테고리에 추가하기
             </Button>
           </BottomDiv>
         {/if}
       </FullscreenDiv>
     </BottomSheet>
-{/if}
 
-<CategoryCreateModal
+    <CategoryCreateModal
       bind:isOpen={isCategoryCreateModalOpen}
       onCreateClick={async (name: string) => {
-    if (await requestCategoryCreation(name, $category!.id, $masterKeyStore?.get(1)!)) {
+        if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) {
-      category = getCategoryInfo($category!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
       }}
-/>
+    />
+  {/if}
+{/await}

src/routes/(main)/category/[[id]]/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components/molecules";
   import { Category, CategoryCreateModal } from "$lib/components/organisms";
-  import { getCategoryInfo, updateCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore } from "$lib/stores";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
@@ -19,9 +18,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let info: Writable<CategoryInfo | null> | undefined = $state();
+  let infoPromise: Promise<CategoryInfo> | undefined = $state();
-
-  let isFileRecursive: boolean | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
@@ -29,20 +26,7 @@
   let isCategoryDeleteModalOpen = $state(false);
 
   $effect(() => {
-    info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
-    isFileRecursive = undefined;
-  });
-
-  $effect(() => {
-    if ($info && isFileRecursive === undefined) {
-      isFileRecursive = $info.isFileRecursive ?? false;
-    }
-  });
-
-  $effect(() => {
-    if (data.id !== "root" && $info?.isFileRecursive !== isFileRecursive) {
-      updateCategoryInfo(data.id as number, { isFileRecursive });
-    }
   });
 </script>
 
@@ -50,18 +34,19 @@
   <title>카테고리</title>
 </svelte:head>
 
-{#if data.id !== "root"}
+{#await infoPromise then info}
-  <TopBar title={$info?.name} />
+  {#if info}
-{/if}
+    {#if info.id !== "root"}
-<div class="min-h-full bg-gray-100 pb-[5.5em]">
+      <TopBar title={info.name} />
-  {#if $info && isFileRecursive !== undefined}
+    {/if}
+    <div class="min-h-full bg-gray-100 pb-[5.5em]">
       <Category
-      bind:isFileRecursive
+        bind:isFileRecursive={info.isFileRecursive}
-      info={$info}
+        {info}
         onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
         onFileRemoveClick={async ({ id }) => {
           await requestFileRemovalFromCategory(id, data.id as number);
-        info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
         }}
         onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
         onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
@@ -70,21 +55,20 @@
           isCategoryMenuBottomSheetOpen = true;
         }}
       />
-  {/if}
+    </div>
-</div>
 
-<CategoryCreateModal
+    <CategoryCreateModal
       bind:isOpen={isCategoryCreateModalOpen}
       onCreateClick={async (name: string) => {
         if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
       }}
-/>
+    />
 
-<CategoryMenuBottomSheet
+    <CategoryMenuBottomSheet
       bind:isOpen={isCategoryMenuBottomSheetOpen}
       onRenameClick={() => {
         isCategoryMenuBottomSheetOpen = false;
@@ -94,24 +78,26 @@
         isCategoryMenuBottomSheetOpen = false;
         isCategoryDeleteModalOpen = true;
       }}
-/>
+    />
-<CategoryRenameModal
+    <CategoryRenameModal
       bind:isOpen={isCategoryRenameModalOpen}
       onRenameClick={async (newName: string) => {
         if (await requestCategoryRename(context.selectedCategory!, newName)) {
-      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
       }}
-/>
+    />
-<CategoryDeleteModal
+    <CategoryDeleteModal
       bind:isOpen={isCategoryDeleteModalOpen}
       onDeleteClick={async () => {
         if (await requestCategoryDeletion(context.selectedCategory!)) {
-      info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
       }}
-/>
+    />
+  {/if}
+{/await}

src/routes/(main)/category/[[id]]/service.svelte.ts

@@ -17,12 +17,17 @@ export const useContext = () => {
 };
 
 export const requestCategoryRename = async (category: SelectedCategory, newName: string) => {
-  const newNameEncrypted = await encryptString(newName, category.dataKey);
+  if (!category.dataKey) {
+    // TODO: Error Handling
+    return false;
+  }
+
+  const newNameEncrypted = await encryptString(newName, category.dataKey.key);
 
   try {
     await trpc().category.rename.mutate({
       id: category.id,
-      dekVersion: category.dataKeyVersion,
+      dekVersion: category.dataKey.version,
       name: newNameEncrypted.ciphertext,
       nameIv: newNameEncrypted.iv,
     });

src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte

@@ -39,7 +39,7 @@
       details,
     });
 
-  const entries = $derived([
+  let entries = $derived([
     ...(showParentEntry ? ([{ type: "parent" }] as const) : []),
     ...sortEntries(info.subDirectories.map(toEntry("directory"))),
     ...sortEntries([

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -35,7 +35,13 @@
   actionButtonIcon={IconMoreVert}
   onActionButtonClick={() => action(onOpenMenuClick)}
 >
-  {#await thumbnailPromise then thumbnail}
+  {#await thumbnailPromise}
+    <DirectoryEntryLabel
+      type="file"
+      name={info.name}
+      subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
+    />
+  {:then thumbnail}
     <DirectoryEntryLabel
       type="file"
       thumbnail={thumbnail ?? undefined}

src/routes/(main)/directory/[[id]]/service.svelte.ts

@@ -98,7 +98,6 @@ export const requestFileUpload = async (
 export const requestEntryRename = async (entry: SelectedEntry, newName: string) => {
   if (!entry.dataKey) {
     // TODO: Error Handling
-    console.log("hi");
     return false;
   }
 

src/trpc/routers/category.ts

@@ -9,6 +9,7 @@ const categoryRouter = router({
     .input(
       z.object({
         id: categoryIdSchema,
+        recurse: z.boolean().default(false),
       }),
     )
     .query(async ({ ctx, input }) => {
@@ -20,7 +21,12 @@ const categoryRouter = router({
         throw new TRPCError({ code: "NOT_FOUND", message: "Invalid category id" });
       }
 
-      const categories = await CategoryRepo.getAllCategoriesByParent(ctx.session.userId, input.id);
+      const [categories, files] = await Promise.all([
+        CategoryRepo.getAllCategoriesByParent(ctx.session.userId, input.id),
+        input.id !== "root"
+          ? FileRepo.getAllFilesByCategory(ctx.session.userId, input.id, input.recurse)
+          : undefined,
+      ]);
       return {
         metadata: category && {
           parent: category.parentId,
@@ -30,7 +36,28 @@ const categoryRouter = router({
           name: category.encName.ciphertext,
           nameIv: category.encName.iv,
         },
-        subCategories: categories.map(({ id }) => id),
+        subCategories: categories.map((category) => ({
+          id: category.id,
+          mekVersion: category.mekVersion,
+          dek: category.encDek,
+          dekVersion: category.dekVersion,
+          name: category.encName.ciphertext,
+          nameIv: category.encName.iv,
+        })),
+        files: files?.map((file) => ({
+          id: file.id,
+          mekVersion: file.mekVersion,
+          dek: file.encDek,
+          dekVersion: file.dekVersion,
+          contentType: file.contentType,
+          name: file.encName.ciphertext,
+          nameIv: file.encName.iv,
+          createdAt: file.encCreatedAt?.ciphertext,
+          createdAtIv: file.encCreatedAt?.iv,
+          lastModifiedAt: file.encLastModifiedAt.ciphertext,
+          lastModifiedAtIv: file.encLastModifiedAt.iv,
+          isRecursive: file.isRecursive,
+        })),
       };
     }),
 
@@ -113,27 +140,6 @@ const categoryRouter = router({
       }
     }),
 
-  files: roleProcedure["activeClient"]
-    .input(
-      z.object({
-        id: z.int().positive(),
-        recurse: z.boolean().default(false),
-      }),
-    )
-    .query(async ({ ctx, input }) => {
-      const category = await CategoryRepo.getCategory(ctx.session.userId, input.id);
-      if (!category) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Invalid category id" });
-      }
-
-      const files = await FileRepo.getAllFilesByCategory(
-        ctx.session.userId,
-        input.id,
-        input.recurse,
-      );
-      return files.map(({ id, isRecursive }) => ({ file: id, isRecursive }));
-    }),
-
   addFile: roleProcedure["activeClient"]
     .input(
       z.object({