썸네일 표시 구현

src/lib/components/molecules/labels/DirectoryEntryLabel.svelte

@@ -10,18 +10,45 @@
     name: string;
     subtext?: string;
     textClass?: ClassValue;
+    thumbnail?: ArrayBuffer;
     type: "directory" | "file";
   }
 
-  let { class: className, name, subtext, textClass: textClassName, type }: Props = $props();
+  let {
+    class: className,
+    name,
+    subtext,
+    textClass: textClassName,
+    thumbnail,
+    type,
+  }: Props = $props();
+
+  let thumbnailUrl: string | undefined = $state();
+
+  $effect(() => {
+    thumbnailUrl = thumbnail && URL.createObjectURL(new Blob([thumbnail]));
+    return () => thumbnailUrl && URL.revokeObjectURL(thumbnailUrl);
+  });
 </script>
 
+{#snippet iconSnippet()}
+  <div class="flex h-10 w-10 items-center justify-center overflow-y-hidden text-xl">
+    {#if thumbnailUrl}
+      <img src={thumbnailUrl} alt={name} loading="lazy" />
+    {:else if type === "directory"}
+      <IconFolder />
+    {:else}
+      <IconDraft />
+    {/if}
+  </div>
+{/snippet}
+
 {#snippet subtextSnippet()}
   {subtext}
 {/snippet}
 
 <IconLabel
-  icon={type === "directory" ? IconFolder : IconDraft}
+  icon={iconSnippet}
   iconClass={type === "file" ? "text-blue-400" : undefined}
   subtext={subtext ? subtextSnippet : undefined}
   class={className}

src/lib/components/molecules/labels/IconLabel.svelte

@@ -5,7 +5,7 @@
   interface Props {
     children: Snippet;
     class?: ClassValue;
-    icon: Component<SvelteHTMLElements["svg"]>;
+    icon: Component<SvelteHTMLElements["svg"]> | Snippet;
     iconClass?: ClassValue;
     subtext?: Snippet;
     textClass?: ClassValue;