캐시 삭제 구현

src/routes/(fullscreen)/setting/cache/+page.svelte

@@ -7,7 +7,7 @@
   import { getFileInfo } from "$lib/modules/file";
   import { masterKeyStore, type FileInfo } from "$lib/stores";
   import File from "./File.svelte";
-  import { formatFileSize } from "./service";
+  import { formatFileSize, deleteFileCache as doDeleteFileCache } from "./service";
 
   interface FileCache {
     index: FileCacheIndex;
@@ -17,6 +17,11 @@
   let fileCache: FileCache[] | undefined = $state();
   let fileCacheTotalSize = $state(0);
 
+  const deleteFileCache = async (fileId: number) => {
+    await doDeleteFileCache(fileId);
+    fileCache = fileCache?.filter(({ index }) => index.fileId !== fileId);
+  };
+
   onMount(() => {
     fileCache = getFileCacheIndex()
       .map((index) => ({
@@ -45,7 +50,7 @@
       </div>
       <div class="space-y-2">
         {#each fileCache as { index, fileInfo }}
-          <File {index} info={fileInfo} />
+          <File {index} info={fileInfo} onDeleteClick={deleteFileCache} />
         {/each}
       </div>
     </div>

src/routes/(fullscreen)/setting/cache/File.svelte

@@ -6,14 +6,15 @@
 
   import IconDraft from "~icons/material-symbols/draft";
   import IconScanDelete from "~icons/material-symbols/scan-delete";
-  // import IconDelete from "~icons/material-symbols/delete";
+  import IconDelete from "~icons/material-symbols/delete";
 
   interface Props {
     index: FileCacheIndex;
     info: Writable<FileInfo | null>;
+    onDeleteClick: (fileId: number) => void;
   }
 
-  let { index, info }: Props = $props();
+  let { index, info, onDeleteClick }: Props = $props();
 </script>
 
 <div class="flex h-14 items-center gap-x-4 p-2">
@@ -36,7 +37,10 @@
       읽음 {formatDate(index.lastRetrievedAt)} · {formatFileSize(index.size)}
     </p>
   </div>
-  <!-- <button class="flex-shrink-0 rounded-full p-1 active:bg-gray-100">
+  <button
+    onclick={() => setTimeout(() => onDeleteClick(index.fileId), 100)}
+    class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
+  >
     <IconDelete class="text-lg text-gray-600" />
-  </button> -->
+  </button>
 </div>

src/routes/(fullscreen)/setting/cache/service.ts

@@ -1 +1,7 @@
+import { deleteFileCache as doDeleteFileCache } from "$lib/modules/cache";
+
 export { formatDate, formatFileSize } from "$lib/modules/util";
+
+export const deleteFileCache = async (fileId: number) => {
+  await doDeleteFileCache(fileId);
+};