heic 파일에 대한 썸네일 지원 추가 및 카테고리 페이지에서도 파일의 썸네일이 표시되도록 개선

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

@@ -2,8 +2,9 @@
   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 type { SelectedFile } from "./service";
+  import { requestFileThumbnailDownload, type SelectedFile } from "./service";
 
   import IconClose from "~icons/material-symbols/close";
 
@@ -15,6 +16,8 @@
 
   let { info, onclick, onRemoveClick }: Props = $props();
 
+  let thumbnail: string | undefined = $state();
+
   const openFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
@@ -28,6 +31,24 @@
 
     onRemoveClick!({ id, dataKey, dataKeyVersion, name });
   };
+
+  $effect(() => {
+    if ($info?.dataKey) {
+      getFileThumbnail($info.id)
+        .then(
+          (thumbnailUrl) => thumbnailUrl || requestFileThumbnailDownload($info.id, $info.dataKey!),
+        )
+        .then((thumbnailUrl) => {
+          thumbnail = thumbnailUrl ?? undefined;
+        })
+        .catch(() => {
+          // TODO: Error Handling
+          thumbnail = undefined;
+        });
+    } else {
+      thumbnail = undefined;
+    }
+  });
 </script>
 
 {#if $info}
@@ -37,6 +58,6 @@
     actionButtonIcon={onRemoveClick && IconClose}
     onActionButtonClick={removeFile}
   >
-    <DirectoryEntryLabel type="file" name={$info.name} />
+    <DirectoryEntryLabel type="file" {thumbnail} name={$info.name} />
   </ActionEntryButton>
 {/if}

src/lib/components/organisms/Category/service.ts

@@ -1,3 +1,5 @@
+export { requestFileThumbnailDownload } from "$lib/services/file";
+
 export interface SelectedFile {
   id: number;
   dataKey: CryptoKey;