파일 썸네일이 캐시되는 OPFS의 경로 변경

src/lib/components/organisms/Category/File.svelte

@@ -2,7 +2,6 @@
   import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import { getFileThumbnail } from "$lib/modules/file";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { requestFileThumbnailDownload, type SelectedFile } from "./service";
 
@@ -34,10 +33,7 @@
 
   $effect(() => {
     if ($info?.dataKey) {
-      getFileThumbnail($info.id)
-        .then(
-          (thumbnailUrl) => thumbnailUrl || requestFileThumbnailDownload($info.id, $info.dataKey!),
-        )
+      requestFileThumbnailDownload($info.id, $info.dataKey)
         .then((thumbnailUrl) => {
           thumbnail = thumbnailUrl ?? undefined;
         })

src/lib/modules/file/cache.ts

@@ -1,12 +1,15 @@
+import { LRUCache } from "lru-cache";
 import {
   getFileCacheIndex as getFileCacheIndexFromIndexedDB,
   storeFileCacheIndex,
   deleteFileCacheIndex,
   type FileCacheIndex,
 } from "$lib/indexedDB";
-import { readFile, writeFile, deleteFile } from "$lib/modules/opfs";
+import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
+import { getThumbnailUrl } from "$lib/modules/thumbnail";
 
 const fileCacheIndex = new Map<number, FileCacheIndex>();
+const loadedThumbnails = new LRUCache<number, string>({ max: 100 });
 
 export const prepareFileCache = async () => {
   for (const cache of await getFileCacheIndexFromIndexedDB()) {
@@ -48,3 +51,32 @@ export const deleteFileCache = async (fileId: number) => {
   await deleteFile(`/cache/${fileId}`);
   await deleteFileCacheIndex(fileId);
 };
+
+export const getFileThumbnailCache = async (fileId: number) => {
+  const thumbnail = loadedThumbnails.get(fileId);
+  if (thumbnail) {
+    return thumbnail;
+  }
+
+  const thumbnailBuffer = await readFile(`/thumbnail/file/${fileId}`);
+  if (!thumbnailBuffer) return null;
+
+  const thumbnailUrl = getThumbnailUrl(thumbnailBuffer);
+  loadedThumbnails.set(fileId, thumbnailUrl);
+  return thumbnailUrl;
+};
+
+export const storeFileThumbnailCache = async (fileId: number, thumbnailBuffer: ArrayBuffer) => {
+  await writeFile(`/thumbnail/file/${fileId}`, thumbnailBuffer);
+  loadedThumbnails.set(fileId, getThumbnailUrl(thumbnailBuffer));
+};
+
+export const deleteFileThumbnailCache = async (fileId: number) => {
+  loadedThumbnails.delete(fileId);
+  await deleteFile(`/thumbnail/file/${fileId}`);
+};
+
+export const deleteAllFileThumbnailCaches = async () => {
+  loadedThumbnails.clear();
+  await deleteDirectory("/thumbnail/file");
+};

src/lib/modules/file/index.ts

@@ -1,4 +1,3 @@
 export * from "./cache";
 export * from "./download";
-export * from "./thumbnail";
 export * from "./upload";

src/lib/modules/file/thumbnail.ts

@@ -1,34 +0,0 @@
-import { LRUCache } from "lru-cache";
-import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
-import { getThumbnailUrl } from "$lib/modules/thumbnail";
-
-const loadedThumbnails = new LRUCache<number, string>({ max: 100 });
-
-export const getFileThumbnail = async (fileId: number) => {
-  const thumbnail = loadedThumbnails.get(fileId);
-  if (thumbnail) {
-    return thumbnail;
-  }
-
-  const thumbnailBuffer = await readFile(`/thumbnails/${fileId}`);
-  if (!thumbnailBuffer) return null;
-
-  const thumbnailUrl = getThumbnailUrl(thumbnailBuffer);
-  loadedThumbnails.set(fileId, thumbnailUrl);
-  return thumbnailUrl;
-};
-
-export const storeFileThumbnail = async (fileId: number, thumbnailBuffer: ArrayBuffer) => {
-  await writeFile(`/thumbnails/${fileId}`, thumbnailBuffer);
-  loadedThumbnails.set(fileId, getThumbnailUrl(thumbnailBuffer));
-};
-
-export const deleteFileThumbnail = async (fileId: number) => {
-  loadedThumbnails.delete(fileId);
-  await deleteFile(`/thumbnails/${fileId}`);
-};
-
-export const deleteAllFileThumbnails = async () => {
-  loadedThumbnails.clear();
-  await deleteDirectory("/thumbnails");
-};

src/lib/services/file.ts

@@ -1,6 +1,12 @@
 import { callGetApi } from "$lib/hooks";
 import { decryptData } from "$lib/modules/crypto";
-import { getFileCache, storeFileCache, downloadFile, storeFileThumbnail } from "$lib/modules/file";
+import {
+  getFileCache,
+  storeFileCache,
+  getFileThumbnailCache,
+  storeFileThumbnailCache,
+  downloadFile,
+} from "$lib/modules/file";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
 import type { FileThumbnailInfoResponse } from "$lib/server/schemas";
 
@@ -18,6 +24,9 @@ export const requestFileDownload = async (
 };
 
 export const requestFileThumbnailDownload = async (fileId: number, dataKey: CryptoKey) => {
+  const cache = await getFileThumbnailCache(fileId);
+  if (cache) return cache;
+
   let res = await callGetApi(`/api/file/${fileId}/thumbnail`);
   if (!res.ok) return null;
 
@@ -29,6 +38,6 @@ export const requestFileThumbnailDownload = async (fileId: number, dataKey: Cryp
   const thumbnailEncrypted = await res.arrayBuffer();
   const thumbnail = await decryptData(thumbnailEncrypted, thumbnailEncryptedIv, dataKey);
 
-  storeFileThumbnail(fileId, thumbnail); // Intended
+  storeFileThumbnailCache(fileId, thumbnail); // Intended
   return getThumbnailUrl(thumbnail);
 };