카테고리 페이지에 파일 제거 버튼 구현

src/lib/organisms/Category/Category.svelte

@@ -12,6 +12,7 @@
   interface Props {
     info: CategoryInfo;
     onFileClick: (file: SelectedFile) => void;
+    onFileRemoveClick: (file: SelectedFile) => void;
     onSubCategoryClick: (subCategory: SelectedCategory) => void;
     onSubCategoryCreateClick: () => void;
     onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
@@ -20,6 +21,7 @@
   let {
     info,
     onFileClick,
+    onFileRemoveClick,
     onSubCategoryClick,
     onSubCategoryCreateClick,
     onSubCategoryMenuClick,
@@ -53,7 +55,7 @@
       <div class="space-y-1">
         {#key info}
           {#each files as file}
-            <File info={file} onclick={onFileClick} />
+            <File info={file} onclick={onFileClick} onRemoveClick={onFileRemoveClick} />
           {:else}
             <p>이 카테고리에 추가된 파일이 없어요.</p>
           {/each}

src/lib/organisms/Category/File.svelte

@@ -4,14 +4,15 @@
   import type { SelectedFile } from "./service";
 
   import IconDraft from "~icons/material-symbols/draft";
-  import IconMoreVert from "~icons/material-symbols/more-vert";
+  import IconClose from "~icons/material-symbols/close";
 
   interface Props {
     info: Writable<FileInfo | null>;
     onclick: (selectedFile: SelectedFile) => void;
+    onRemoveClick: (selectedFile: SelectedFile) => void;
   }
 
-  let { info, onclick }: Props = $props();
+  let { info, onclick, onRemoveClick }: Props = $props();
 
   const openFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
@@ -22,10 +23,15 @@
     }, 100);
   };
 
-  const openMenu = (e: Event) => {
+  const removeFile = (e: Event) => {
     e.stopPropagation();
 
-    // TODO
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    setTimeout(() => {
+      onRemoveClick({ id, dataKey, dataKeyVersion, name });
+    }, 100);
   };
 </script>
 
@@ -41,21 +47,21 @@
         {$info.name}
       </p>
       <button
-        id="open-menu"
+        id="remove-file"
-        onclick={openMenu}
+        onclick={removeFile}
         class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
       >
-        <IconMoreVert class="text-lg" />
+        <IconClose class="text-lg" />
       </button>
     </div>
   </div>
 {/if}
 
 <style>
-  #button:active:not(:has(#open-menu:active)) {
+  #button:active:not(:has(#remove-file:active)) {
     @apply bg-gray-100;
   }
-  #button-content:active:not(:has(#open-menu:active)) {
+  #button-content:active:not(:has(#remove-file:active)) {
     @apply scale-95;
   }
 </style>

src/lib/services/category.ts

@@ -1,6 +1,6 @@
 import { callPostApi } from "$lib/hooks";
 import { generateDataKey, wrapDataKey, encryptString } from "$lib/modules/crypto";
-import type { CategoryCreateRequest } from "$lib/server/schemas";
+import type { CategoryCreateRequest, CategoryFileRemoveRequest } from "$lib/server/schemas";
 import type { MasterKey } from "$lib/stores";
 
 export const requestCategoryCreation = async (
@@ -19,3 +19,11 @@ export const requestCategoryCreation = async (
     nameIv: nameEncrypted.iv,
   });
 };
+
+export const requestFileRemovalFromCategory = async (fileId: number, categoryId: number) => {
+  const res = await callPostApi<CategoryFileRemoveRequest>(
+    `/api/category/${categoryId}/file/remove`,
+    { file: fileId },
+  );
+  return res.ok;
+};

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

@@ -16,9 +16,9 @@
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
   import {
+    requestFileRemovalFromCategory,
     requestFileDownload,
     requestFileAdditionToCategory,
-    requestFileRemovalFromCategory,
   } from "./service";
 
   import IconClose from "~icons/material-symbols/close";

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

@@ -1,8 +1,8 @@
 import { callPostApi } from "$lib/hooks";
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
-import type { CategoryFileAddRequest, CategoryFileRemoveRequest } from "$lib/server/schemas";
+import type { CategoryFileAddRequest } from "$lib/server/schemas";
 
-export { requestCategoryCreation } from "$lib/services/category";
+export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -23,11 +23,3 @@ 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;
-};

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

@@ -12,6 +12,7 @@
   import RenameCategoryModal from "./RenameCategoryModal.svelte";
   import {
     requestCategoryCreation,
+    requestFileRemovalFromCategory,
     requestCategoryRename,
     requestCategoryDeletion,
   } from "./service";
@@ -49,13 +50,17 @@
     {#if $info}
       <Category
         info={$info}
+        onFileClick={({ id }) => goto(`/file/${id}`)}
+        onFileRemoveClick={({ id }) => {
+          requestFileRemovalFromCategory(id, data.id as number);
+          info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+        }}
         onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
         onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
         onSubCategoryMenuClick={(subCategory) => {
           selectedSubCategory = subCategory;
           isSubCategoryMenuBottomSheetOpen = true;
         }}
-        onFileClick={({ id }) => goto(`/file/${id}`)}
       />
     {/if}
   </div>

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

@@ -3,7 +3,7 @@ import { encryptString } from "$lib/modules/crypto";
 import type { SelectedCategory } from "$lib/molecules/Categories";
 import type { CategoryRenameRequest } from "$lib/server/schemas";
 
-export { requestCategoryCreation } from "$lib/services/category";
+export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 
 export const requestCategoryRename = async (category: SelectedCategory, newName: string) => {
   const newNameEncrypted = await encryptString(newName, category.dataKey);