OPFS에 캐시된 썸네일을 모두 삭제하는 기능 추가

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
-  let { children } = $props();
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class="flex flex-grow flex-col justify-between px-4">
+<div class={["flex flex-grow flex-col justify-between px-4", className]}>
   {@render children()}
 </div>

src/lib/modules/file/thumbnail.ts

@@ -1,5 +1,5 @@
 import { LRUCache } from "lru-cache";
-import { readFile, writeFile, deleteFile } from "$lib/modules/opfs";
+import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
 
 const loadedThumbnails = new LRUCache<number, string>({ max: 100 });
@@ -27,3 +27,8 @@ export const deleteFileThumbnail = async (fileId: number) => {
   loadedThumbnails.delete(fileId);
   await deleteFile(`/thumbnails/${fileId}`);
 };
+
+export const deleteAllFileThumbnails = async () => {
+  loadedThumbnails.clear();
+  await deleteDirectory("/thumbnails");
+};

src/lib/modules/opfs.ts

@@ -59,3 +59,39 @@ export const deleteFile = async (path: string) => {
 
   await parentHandle.removeEntry(filename);
 };
+
+const getDirectoryHandle = async (path: string) => {
+  if (!rootHandle) {
+    throw new Error("OPFS not prepared");
+  } else if (path[0] !== "/") {
+    throw new Error("Path must be absolute");
+  }
+
+  const parts = path.split("/");
+  if (parts.length <= 1) {
+    throw new Error("Invalid path");
+  }
+
+  try {
+    let directoryHandle = rootHandle;
+    let parentHandle;
+    for (const part of parts.slice(1)) {
+      if (!part) continue;
+      parentHandle = directoryHandle;
+      directoryHandle = await directoryHandle.getDirectoryHandle(part);
+    }
+    return { directoryHandle, parentHandle };
+  } catch (e) {
+    if (e instanceof DOMException && e.name === "NotFoundError") {
+      return {};
+    }
+    throw e;
+  }
+};
+
+export const deleteDirectory = async (path: string) => {
+  const { directoryHandle, parentHandle } = await getDirectoryHandle(path);
+  if (!parentHandle) return;
+
+  await parentHandle.removeEntry(directoryHandle.name, { recursive: true });
+};