카테고리 이름 변경 및 삭제, 카테고리에서 파일 삭제 구현

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

@@ -15,8 +15,13 @@
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
-  import { requestFileDownload, requestFileAdditionToCategory } from "./service";
+  import {
+    requestFileDownload,
+    requestFileAdditionToCategory,
+    requestFileRemovalFromCategory,
+  } from "./service";
 
+  import IconClose from "~icons/material-symbols/close";
   import IconAddCircle from "~icons/material-symbols/add-circle";
 
   let { data } = $props();
@@ -64,6 +69,11 @@
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
+  const removeFromCategory = async (categoryId: number) => {
+    await requestFileRemovalFromCategory(data.id, categoryId);
+    info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+  };
+
   $effect(() => {
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!);
     isDownloadRequested = false;
@@ -135,7 +145,12 @@
     <div class="space-y-2">
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
-        <Categories {categories} onCategoryClick={({ id }) => goto(`/category/${id}`)} />
+        <Categories
+          {categories}
+          categoryMenuIcon={IconClose}
+          onCategoryClick={({ id }) => goto(`/category/${id}`)}
+          onCategoryMenuClick={({ id }) => removeFromCategory(id)}
+        />
         <EntryButton onclick={() => (isAddToCategoryBottomSheetOpen = true)}>
           <div class="flex h-8 items-center gap-x-4">
             <IconAddCircle class="text-lg text-gray-600" />

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

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
   import { BottomSheet } from "$lib/components";
   import { Button } from "$lib/components/buttons";
   import { BottomDiv } from "$lib/components/divs";
   import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import SubCategories from "$lib/molecules/SubCategories.svelte";
+  import CreateCategoryModal from "$lib/organisms/CreateCategoryModal.svelte";
   import { masterKeyStore } from "$lib/stores";
+  import { requestCategoryCreation } from "./service";
 
   interface Props {
     onAddToCategoryClick: (categoryId: number) => void;
@@ -17,8 +18,20 @@
 
   let category: Writable<CategoryInfo | null> | undefined = $state();
 
-  onMount(() => {
-    category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+  let isCreateCategoryModalOpen = $state(false);
+
+  const createCategory = async (name: string) => {
+    if (!$category) return; // TODO: Error handling
+
+    await requestCategoryCreation(name, $category.id, $masterKeyStore?.get(1)!);
+    isCreateCategoryModalOpen = false;
+    category = getCategoryInfo($category.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+  };
+
+  $effect(() => {
+    if (isOpen) {
+      category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+    }
   });
 </script>
 
@@ -30,6 +43,7 @@
         info={$category}
         onSubCategoryClick={({ id }) =>
           (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
+        onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
         subCategoryCreatePosition="top"
       />
       {#if $category.id !== "root"}
@@ -40,3 +54,5 @@
     {/if}
   </div>
 </BottomSheet>
+
+<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,6 +1,8 @@
 import { callPostApi } from "$lib/hooks";
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
-import type { CategoryFileAddRequest } from "$lib/server/schemas";
+import type { CategoryFileAddRequest, CategoryFileRemoveRequest } from "$lib/server/schemas";
+
+export { requestCategoryCreation } from "$lib/services/category";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -21,3 +23,11 @@ export const requestFileAdditionToCategory = async (fileId: number, categoryId:
   });
   return res.ok;
 };
+
+export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {
+  const res = await callPostApi<CategoryFileRemoveRequest>(
+    `/api/category/${categoryId}/file/remove`,
+    { file: fileId },
+  );
+  return res.ok;
+};