카테고리에 파일을 추가할 수 있는 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}
+/>

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

@@ -0,0 +1,42 @@
+<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 { masterKeyStore } from "$lib/stores";
+
+  interface Props {
+    onAddToCategoryClick: (categoryId: number) => void;
+    isOpen: boolean;
+  }
+
+  let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
+
+  let category: Writable<CategoryInfo | null> | undefined = $state();
+
+  onMount(() => {
+    category = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+  });
+</script>
+
+<BottomSheet bind:isOpen>
+  <div class="flex w-full flex-col justify-between">
+    {#if $category}
+      <SubCategories
+        class="h-fit py-4"
+        info={$category}
+        onSubCategoryClick={({ id }) =>
+          (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
+        subCategoryCreatePosition="top"
+      />
+      {#if $category.id !== "root"}
+        <BottomDiv>
+          <Button onclick={() => onAddToCategoryClick($category.id)}>이 카테고리에 추가하기</Button>
+        </BottomDiv>
+      {/if}
+    {/if}
+  </div>
+</BottomSheet>

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

@@ -1,4 +1,6 @@
+import { callPostApi } from "$lib/hooks";
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
+import type { CategoryFileAddRequest } from "$lib/server/schemas";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -12,3 +14,10 @@ export const requestFileDownload = async (
   storeFileCache(fileId, fileBuffer); // Intended
   return fileBuffer;
 };
+
+export const requestFileAdditionToCategory = async (fileId: number, categoryId: number) => {
+  const res = await callPostApi<CategoryFileAddRequest>(`/api/category/${categoryId}/file/add`, {
+    file: fileId,
+  });
+  return res.ok;
+};