카테고리 관련 API 요청을 TanStack Query로 마이그레이션 (WiP)

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

@@ -1,14 +1,16 @@
 <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 { derived } from "svelte/store";
+  import type { CategoryId } from "$lib/indexedDB";
+  import { getCategoryInfo, type SubCategoryInfo } from "$lib/modules/filesystem2";
   import { SortBy, sortEntries } from "$lib/modules/util";
+  import { masterKeyStore } from "$lib/stores";
   import Category from "./Category.svelte";
   import type { SelectedCategory } from "./service";
 
   interface Props {
-    categories: Writable<CategoryInfo | null>[];
+    categoryIds: CategoryId[];
     categoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
     onCategoryClick: (category: SelectedCategory) => void;
     onCategoryMenuClick?: (category: SelectedCategory) => void;
@@ -16,42 +18,33 @@
   }
 
   let {
-    categories,
+    categoryIds,
     categoryMenuIcon,
     onCategoryClick,
     onCategoryMenuClick,
     sortBy = SortBy.NAME_ASC,
   }: 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 categories = $derived(
+    derived(
+      categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)),
+      (infos) => {
+        const categories = infos
+          .filter(($info) => $info.status === "success")
+          .map(($info) => ({
+            name: $info.data.name,
+            info: $info.data as SubCategoryInfo,
+          }));
+        sortEntries(categories, sortBy);
+        return categories;
+      },
+    ),
+  );
 </script>
 
-{#if categoriesWithName.length > 0}
+{#if $categories.length > 0}
   <div class="space-y-1">
-    {#each categoriesWithName as { info }}
+    {#each $categories as { info }}
       <Category
         {info}
         menuIcon={categoryMenuIcon}

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

@@ -1,14 +1,13 @@
 <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";
   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;
@@ -17,27 +16,25 @@
   let { info, menuIcon, onclick, onMenuClick }: Props = $props();
 
   const openCategory = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    const { id, dataKey, dataKeyVersion, name } = info;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
     onclick({ id, dataKey, dataKeyVersion, name });
   };
 
   const openMenu = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    const { id, dataKey, dataKeyVersion, name } = info;
     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={openCategory}
+  actionButtonIcon={menuIcon}
+  onActionButtonClick={openMenu}
+>
+  <CategoryLabel name={info.name} />
+</ActionEntryButton>

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";
 
   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]}>
@@ -55,7 +45,7 @@
   {/if}
   {#key info}
     <Categories
-      categories={subCategories}
+      categoryIds={info.subCategoryIds}
       categoryMenuIcon={subCategoryMenuIcon}
       onCategoryClick={onSubCategoryClick}
       onCategoryMenuClick={onSubCategoryMenuClick}

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

@@ -2,8 +2,7 @@
   import { derived } from "svelte/store";
   import { CheckBox } from "$lib/components/atoms";
   import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
-  import { getFileInfo } from "$lib/modules/filesystem2";
+  import { getFileInfo, type CategoryInfo } from "$lib/modules/filesystem2";
   import { SortBy, sortEntries } from "$lib/modules/util";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
@@ -19,7 +18,7 @@
     onSubCategoryCreateClick: () => void;
     onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
     sortBy?: SortBy;
-    isFileRecursive: boolean;
+    isFileRecursive?: boolean;
   }
 
   let {
@@ -81,9 +80,11 @@
     <div class="space-y-4 bg-white p-4">
       <div class="flex items-center justify-between">
         <p class="text-lg font-bold text-gray-800">파일</p>
-        <CheckBox bind:checked={isFileRecursive}>
-          <p class="font-medium">하위 카테고리의 파일</p>
-        </CheckBox>
+        {#if isFileRecursive !== undefined}
+          <CheckBox bind:checked={isFileRecursive}>
+            <p class="font-medium">하위 카테고리의 파일</p>
+          </CheckBox>
+        {/if}
       </div>
       <div class="space-y-1">
         {#key info}

src/lib/indexedDB/filesystem.ts

@@ -106,7 +106,10 @@ export const storeCategoryInfo = async (categoryInfo: CategoryInfo) => {
   await filesystem.category.put(categoryInfo);
 };
 
-export const updateCategoryInfo = async (id: number, changes: { isFileRecursive?: boolean }) => {
+export const updateCategoryInfo = async (
+  id: number,
+  changes: { name?: string; isFileRecursive?: boolean },
+) => {
   await filesystem.category.update(id, changes);
 };
 

src/lib/modules/filesystem.ts

@@ -1,151 +0,0 @@
-import { get, writable, type Writable } from "svelte/store";
-import { callGetApi } from "$lib/hooks";
-import {
-  getCategoryInfos as getCategoryInfosFromIndexedDB,
-  getCategoryInfo as getCategoryInfoFromIndexedDB,
-  storeCategoryInfo,
-  updateCategoryInfo as updateCategoryInfoInIndexedDB,
-  deleteCategoryInfo,
-  type CategoryId,
-} from "$lib/indexedDB";
-import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
-import type { CategoryInfoResponse, CategoryFileListResponse } from "$lib/server/schemas";
-
-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 categoryInfoStore = new Map<CategoryId, Writable<CategoryInfo | null>>();
-
-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 res = await callGetApi(`/api/category/${id}`);
-  if (res.status === 404) {
-    info.set(null);
-    await deleteCategoryInfo(id as number);
-    return;
-  } else if (!res.ok) {
-    throw new Error("Failed to fetch category information");
-  }
-
-  const { metadata, subCategories }: CategoryInfoResponse = await res.json();
-
-  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);
-
-    res = await callGetApi(`/api/category/${id}/file/list?recurse=true`);
-    if (!res.ok) {
-      throw new Error("Failed to fetch category files");
-    }
-
-    const { files }: CategoryFileListResponse = await res.json();
-    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/category.ts

@@ -0,0 +1,294 @@
+import { useQueryClient, createQuery, createMutation } from "@tanstack/svelte-query";
+import { callGetApi, callPostApi } from "$lib/hooks";
+import {
+  getCategoryInfos as getCategoryInfosFromIndexedDB,
+  getCategoryInfo as getCategoryInfoFromIndexedDB,
+  storeCategoryInfo,
+  updateCategoryInfo,
+  deleteCategoryInfo,
+  type CategoryId,
+} from "$lib/indexedDB";
+import {
+  generateDataKey,
+  wrapDataKey,
+  unwrapDataKey,
+  encryptString,
+  decryptString,
+} from "$lib/modules/crypto";
+import type {
+  CategoryInfoResponse,
+  CategoryFileListResponse,
+  CategoryRenameRequest,
+  CategoryCreateRequest,
+  CategoryCreateResponse,
+} from "$lib/server/schemas";
+import type { MasterKey } from "$lib/stores";
+
+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;
+    };
+export type SubCategoryInfo = CategoryInfo & { id: number };
+
+let temporaryIdCounter = -1;
+
+const getInitialCategoryInfo = async (id: CategoryId) => {
+  const [category, subCategories] = await Promise.all([
+    id !== "root" ? getCategoryInfoFromIndexedDB(id) : undefined,
+    getCategoryInfosFromIndexedDB(id),
+  ]);
+  const subCategoryIds = subCategories.map(({ id }) => id);
+
+  if (id === "root") {
+    return { id, subCategoryIds };
+  } else if (category) {
+    return {
+      id,
+      name: category.name,
+      subCategoryIds,
+      files: category.files,
+      isFileRecursive: category.isFileRecursive,
+    };
+  }
+  return undefined;
+};
+
+export const getCategoryInfo = (id: CategoryId, masterKey: CryptoKey) => {
+  return createQuery<CategoryInfo>({
+    queryKey: ["category", id],
+    queryFn: async ({ client, signal }) => {
+      if (!client.getQueryData<CategoryInfo>(["category", id])) {
+        const initialInfo = await getInitialCategoryInfo(id);
+        if (initialInfo) {
+          setTimeout(() => client.invalidateQueries({ queryKey: ["category", id] }), 0);
+          return initialInfo;
+        }
+      }
+
+      const res = await callGetApi(`/api/category/${id}`, { signal }); // TODO: 404
+      const { metadata, subCategories }: CategoryInfoResponse = await res.json();
+
+      if (id === "root") {
+        return { id, subCategoryIds: subCategories };
+      } else {
+        const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
+        const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
+
+        const res = await callGetApi(`/api/category/${id}/file/list?recurse=true`); // TODO: Error Handling
+        const { files }: CategoryFileListResponse = await res.json();
+        const filesMapped = files.map(({ file, isRecursive }) => ({ id: file, isRecursive }));
+
+        const prevInfo = client.getQueryData<CategoryInfo>(["category", id]);
+        await storeCategoryInfo({
+          id,
+          parentId: metadata!.parent,
+          name,
+          files: filesMapped,
+          isFileRecursive: prevInfo?.isFileRecursive ?? false,
+        });
+        return {
+          id,
+          dataKey,
+          dataKeyVersion: new Date(metadata!.dekVersion),
+          name,
+          subCategoryIds: subCategories,
+          files: filesMapped,
+          isFileRecursive: prevInfo?.isFileRecursive ?? false,
+        };
+      }
+    },
+    staleTime: Infinity,
+  });
+};
+
+export type CategoryInfoStore = ReturnType<typeof getCategoryInfo>;
+
+export const useCategoryCreation = (parentId: CategoryId, masterKey: MasterKey) => {
+  const queryClient = useQueryClient();
+  return createMutation<void, Error, { name: string }, { tempId: number }>({
+    mutationFn: async ({ name }) => {
+      const { dataKey, dataKeyVersion } = await generateDataKey();
+      const nameEncrypted = await encryptString(name, dataKey);
+
+      const res = await callPostApi<CategoryCreateRequest>("/api/category/create", {
+        parent: parentId,
+        mekVersion: masterKey.version,
+        dek: await wrapDataKey(dataKey, masterKey.key),
+        dekVersion: dataKeyVersion.toISOString(),
+        name: nameEncrypted.ciphertext,
+        nameIv: nameEncrypted.iv,
+      });
+      if (!res.ok) throw new Error("Failed to create category");
+
+      const { category: id }: CategoryCreateResponse = await res.json();
+      queryClient.setQueryData<CategoryInfo>(["category", id], {
+        id,
+        name,
+        dataKey,
+        dataKeyVersion,
+        subCategoryIds: [],
+        files: [],
+        isFileRecursive: false,
+      });
+      await storeCategoryInfo({ id, parentId, name, files: [], isFileRecursive: false });
+    },
+    onMutate: async ({ name }) => {
+      const tempId = temporaryIdCounter--;
+      queryClient.setQueryData<CategoryInfo>(["category", tempId], {
+        id: tempId,
+        name,
+        subCategoryIds: [],
+        files: [],
+        isFileRecursive: false,
+      });
+
+      await queryClient.cancelQueries({ queryKey: ["category", parentId] });
+      queryClient.setQueryData<CategoryInfo>(["category", parentId], (prevParentInfo) => {
+        if (!prevParentInfo) return;
+        return {
+          ...prevParentInfo,
+          subCategoryIds: [...prevParentInfo.subCategoryIds, tempId],
+        };
+      });
+
+      return { tempId };
+    },
+    onError: (_error, _variables, context) => {
+      if (context) {
+        queryClient.setQueryData<CategoryInfo>(["category", parentId], (prevParentInfo) => {
+          if (!prevParentInfo) return;
+          return {
+            ...prevParentInfo,
+            subCategoryIds: prevParentInfo.subCategoryIds.filter((id) => id !== context.tempId),
+          };
+        });
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["category", parentId] });
+    },
+  });
+};
+
+export const useCategoryRename = () => {
+  const queryClient = useQueryClient();
+  return createMutation<
+    void,
+    Error,
+    {
+      id: number;
+      dataKey: CryptoKey;
+      dataKeyVersion: Date;
+      newName: string;
+    },
+    { oldName: string | undefined }
+  >({
+    mutationFn: async ({ id, dataKey, dataKeyVersion, newName }) => {
+      const newNameEncrypted = await encryptString(newName, dataKey);
+      const res = await callPostApi<CategoryRenameRequest>(`/api/category/${id}/rename`, {
+        dekVersion: dataKeyVersion.toISOString(),
+        name: newNameEncrypted.ciphertext,
+        nameIv: newNameEncrypted.iv,
+      });
+      if (!res.ok) throw new Error("Failed to rename category");
+
+      await updateCategoryInfo(id, { name: newName });
+    },
+    onMutate: async ({ id, newName }) => {
+      await queryClient.cancelQueries({ queryKey: ["category", id] });
+
+      const prevInfo = queryClient.getQueryData<SubCategoryInfo>(["category", id]);
+      if (prevInfo) {
+        queryClient.setQueryData<CategoryInfo>(["category", id], {
+          ...prevInfo,
+          name: newName,
+        });
+      }
+
+      return { oldName: prevInfo?.name };
+    },
+    onError: (_error, { id }, context) => {
+      if (context?.oldName) {
+        queryClient.setQueryData<SubCategoryInfo>(["category", id], (prevInfo) => {
+          if (!prevInfo) return;
+          return { ...prevInfo, name: context.oldName! };
+        });
+      }
+    },
+    onSettled: (_data, _error, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ["category", id] });
+    },
+  });
+};
+
+export const useCategoryDeletion = (parentId: CategoryId) => {
+  const queryClient = useQueryClient();
+  return createMutation<void, Error, { id: number }, {}>({
+    mutationFn: async ({ id }) => {
+      const res = await callPostApi(`/api/category/${id}/delete`);
+      if (!res.ok) throw new Error("Failed to delete category");
+
+      await deleteCategoryInfo(id);
+
+      // TODO: Update FileInfo
+    },
+    onMutate: async ({ id }) => {
+      await queryClient.cancelQueries({ queryKey: ["category", parentId] });
+      queryClient.setQueryData<CategoryInfo>(["category", parentId], (prevParentInfo) => {
+        if (!prevParentInfo) return;
+        return {
+          ...prevParentInfo,
+          subCategoryIds: prevParentInfo.subCategoryIds.filter((categoryId) => categoryId !== id),
+        };
+      });
+      return {};
+    },
+    onError: (_error, { id }, context) => {
+      if (context) {
+        queryClient.setQueryData<CategoryInfo>(["category", parentId], (prevParentInfo) => {
+          if (!prevParentInfo) return;
+          return {
+            ...prevParentInfo,
+            subCategoryIds: [...prevParentInfo.subCategoryIds, id],
+          };
+        });
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["category", parentId] });
+    },
+  });
+};
+
+export const useCategoryFileRecursionToggle = () => {
+  const queryClient = useQueryClient();
+  return createMutation<void, Error, { id: number; isFileRecursive: boolean }, {}>({
+    mutationFn: async ({ id, isFileRecursive }) => {
+      await updateCategoryInfo(id, { isFileRecursive });
+    },
+    onMutate: async ({ id, isFileRecursive }) => {
+      const prevInfo = queryClient.getQueryData<SubCategoryInfo>(["category", id]);
+      if (prevInfo) {
+        queryClient.setQueryData<CategoryInfo>(["category", id], {
+          ...prevInfo,
+          isFileRecursive,
+        });
+      }
+    },
+  });
+};

src/lib/modules/filesystem2/index.ts

@@ -1,2 +1,3 @@
+export * from "./category";
 export * from "./directory";
 export * from "./file";

src/lib/server/db/category.ts

@@ -17,7 +17,7 @@ interface Category {
 export type NewCategory = Omit<Category, "id">;
 
 export const registerCategory = async (params: NewCategory) => {
-  await db.transaction().execute(async (trx) => {
+  return await db.transaction().execute(async (trx) => {
     const mek = await trx
       .selectFrom("master_encryption_key")
       .select("version")
@@ -51,6 +51,7 @@ export const registerCategory = async (params: NewCategory) => {
         new_name: params.encName,
       })
       .execute();
+    return { id: categoryId };
   });
 };
 

src/lib/server/schemas/category.ts

@@ -53,3 +53,8 @@ export const categoryCreateRequest = z.object({
   nameIv: z.string().base64().nonempty(),
 });
 export type CategoryCreateRequest = z.input<typeof categoryCreateRequest>;
+
+export const categoryCreateResponse = z.object({
+  category: z.number().int().positive(),
+});
+export type CategoryCreateResponse = z.output<typeof categoryCreateResponse>;

src/lib/server/services/category.ts

@@ -123,7 +123,8 @@ export const createCategory = async (params: NewCategory) => {
   }
 
   try {
-    await registerCategory(params);
+    const { id } = await registerCategory(params);
+    return { id };
   } catch (e) {
     if (e instanceof IntegrityError && e.message === "Inactive MEK version") {
       error(400, "Inactive MEK version");

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

@@ -5,7 +5,7 @@
   import { goto } from "$app/navigation";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { Categories, IconEntryButton, TopBar } from "$lib/components/molecules";
-  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem2";
   import { getFileInfo } from "$lib/modules/filesystem2";
   import { captureVideoThumbnail } from "$lib/modules/thumbnail";
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
@@ -25,7 +25,6 @@
   let { data } = $props();
 
   let info = $derived(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!));
-  let categories: Writable<CategoryInfo | null>[] = $state([]);
 
   let isAddToCategoryBottomSheetOpen = $state(false);
 
@@ -86,11 +85,6 @@
     viewerType = undefined;
   });
 
-  $effect(() => {
-    categories =
-      $info.data?.categoryIds.map((id) => getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)) ?? [];
-  });
-
   $effect(() => {
     if ($info.data?.dataKey && $info.data?.contentIv) {
       const contentType = $info.data.contentType;
@@ -170,7 +164,7 @@
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
         <Categories
-          {categories}
+          categoryIds={$info.data?.categoryIds ?? []}
           categoryMenuIcon={IconClose}
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}

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 CategoryInfoStore } from "$lib/modules/filesystem2";
   import { masterKeyStore } from "$lib/stores";
   import { requestCategoryCreation } from "./service";
 
@@ -14,7 +13,7 @@
 
   let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
 
-  let category: Writable<CategoryInfo | null> | undefined = $state();
+  let category: CategoryInfoStore | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
 
@@ -25,20 +24,20 @@
   });
 </script>
 
-{#if $category}
+{#if $category?.status === "success"}
   <BottomSheet bind:isOpen class="flex flex-col">
     <FullscreenDiv>
       <SubCategories
         class="py-4"
-        info={$category}
+        info={$category.data}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
         onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         subCategoryCreatePosition="top"
       />
-      {#if $category.id !== "root"}
+      {#if $category.data.id !== "root"}
         <BottomDiv>
-          <Button onclick={() => onAddToCategoryClick($category.id)} class="w-full">
+          <Button onclick={() => onAddToCategoryClick($category.data.id as number)} class="w-full">
             이 카테고리에 추가하기
           </Button>
         </BottomDiv>
@@ -50,8 +49,8 @@
 <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
+    if (await requestCategoryCreation(name, $category!.data!.id, $masterKeyStore?.get(1)!)) {
+      category = getCategoryInfo($category!.data!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;

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, useCategoryFileRecursionToggle } from "$lib/modules/filesystem2";
   import { masterKeyStore } from "$lib/stores";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
@@ -19,9 +18,9 @@
   let { data } = $props();
   let context = createContext();
 
-  let info: Writable<CategoryInfo | null> | undefined = $state();
-
-  let isFileRecursive: boolean | undefined = $state();
+  let info = $derived(getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!));
+  let toggleFileRecursion = useCategoryFileRecursionToggle();
+  let isFileRecursive = $derived($info.data?.isFileRecursive);
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
@@ -29,19 +28,8 @@
   let isCategoryDeleteModalOpen = $state(false);
 
   $effect(() => {
-    info = 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 });
+    if (isFileRecursive !== undefined && $info.data?.isFileRecursive !== isFileRecursive) {
+      $toggleFileRecursion.mutate({ id: data.id as number, isFileRecursive });
     }
   });
 </script>
@@ -51,13 +39,13 @@
 </svelte:head>
 
 {#if data.id !== "root"}
-  <TopBar title={$info?.name} />
+  <TopBar title={$info.data?.name} />
 {/if}
 <div class="min-h-full bg-gray-100 pb-[5.5em]">
-  {#if $info && isFileRecursive !== undefined}
+  {#if $info.status === "success"}
     <Category
       bind:isFileRecursive
-      info={$info}
+      info={$info.data}
       onFileClick={({ id }) => goto(`/file/${id}`)}
       onFileRemoveClick={async ({ id }) => {
         await requestFileRemovalFromCategory(id, data.id as number);

src/routes/+layout.svelte

@@ -35,6 +35,8 @@
   };
 
   onMount(async () => {
+    window.__TANSTACK_QUERY_CLIENT__ = queryClient;
+
     const goto = async (url: string) => {
       const whitelist = ["/auth/login", "/key", "/client/pending"];
       if (!whitelist.some((path) => location.pathname.startsWith(path))) {

src/routes/api/category/create/+server.ts

@@ -1,6 +1,10 @@
-import { error, text } from "@sveltejs/kit";
+import { error, json } from "@sveltejs/kit";
 import { authorize } from "$lib/server/modules/auth";
-import { categoryCreateRequest } from "$lib/server/schemas";
+import {
+  categoryCreateRequest,
+  categoryCreateResponse,
+  type CategoryCreateResponse,
+} from "$lib/server/schemas";
 import { createCategory } from "$lib/server/services/category";
 import type { RequestHandler } from "./$types";
 
@@ -11,7 +15,7 @@ export const POST: RequestHandler = async ({ locals, request }) => {
   if (!zodRes.success) error(400, "Invalid request body");
   const { parent, mekVersion, dek, dekVersion, name, nameIv } = zodRes.data;
 
-  await createCategory({
+  const { id } = await createCategory({
     userId,
     parentId: parent,
     mekVersion,
@@ -19,5 +23,5 @@ export const POST: RequestHandler = async ({ locals, request }) => {
     dekVersion: new Date(dekVersion),
     encName: { ciphertext: name, iv: nameIv },
   });
-  return text("Category created", { headers: { "Content-Type": "text/plain" } });
+  return json(categoryCreateResponse.parse({ category: id } satisfies CategoryCreateResponse));
 };