카테고리에 파일을 추가할 수 있는 BottomSheet 구현 (WiP)

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

@@ -5,13 +5,16 @@
   import { TopBar } from "$lib/components";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
   import { fileDownloadStatusStore, isFileDownloading, masterKeyStore } from "$lib/stores";
+  import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
-  import { requestFileDownload } from "./service";
+  import { requestFileDownload, requestFileAdditionToCategory } from "./service";
 
   let { data } = $props();
 
   let info: Writable<FileInfo | null> | undefined = $state();
 
+  let isAddToCategoryBottomSheetOpen = $state(true);
+
   const downloadStatus = $derived(
     $fileDownloadStatusStore.find((statusStore) => {
       const { id, status } = get(statusStore);
@@ -44,6 +47,11 @@
     return fileBlob;
   };
 
+  const addToCategory = async (categoryId: number) => {
+    await requestFileAdditionToCategory(data.id, categoryId);
+    isAddToCategoryBottomSheetOpen = false;
+  };
+
   $effect(() => {
     info = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!);
     isDownloadRequested = false;
@@ -105,3 +113,8 @@
     {/if}
   </div>
 </div>
+
+<AddToCategoryBottomSheet
+  bind:isOpen={isAddToCategoryBottomSheetOpen}
+  onAddToCategoryClick={addToCategory}
+/>