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

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"
-        onclick={openMenu}
+        id="remove-file"
+        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;
+};